html/css導航欄中的下拉列表未顯示

我創建了一個位置：fixed;我的網頁頂部的navbar和它的一個項目應該是一個名爲「services」的下拉列表，它應該顯示懸停時的下拉列表，但它不起作用。html/css導航欄中的下拉列表未顯示

下面是HTML網頁代碼：

<!DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="mainpage.css"> 
<title>Company name</title> 

</head> 
<body> 
<div class="navdiv"> 
<img style="width:30%;margin-left:0;" src="images/HEH_logo_No_bd_mini.png"> 
<ul class="nav"> 
    <li><a href="">HOME</a></li> 
    <li><a href="about/about.html">ABOUT US</a></li> 
    <li > 
     <a class="dropdown" href="">SERVICES</a> 
     <div class="dropdownlist"> 
      <a href="">AUDIT & ASSURANCE</a> 
      <a href="">TAXATION</a> 
      <a href="">CORPORATE FINANCE</a> 
      <a href="">SERVICES</a> 
      <a href="">MANAGEMENT CONSULTING</a> 
      <a href="">RISK MANAGEMENT</a> 
      <a href="">SECTORS</a> 
      <a href="">HUMAN RESOURCES</a> 
      <a href="">ACCOUNTING, AUDIT & TAX</a> 
     </div> 
    </li> 
    <li><a href="">PARTNERS</a></li> 
    <li><a href="">CONTACT US</a></li> 
</ul> 
</div> 
<div class="divbody"> 
<p>This here will serve as <br>Some text ....</p> 
<p>Some text ....</p> 

</div> 
</body> 
</html>

這裏是CSS樣式表代碼：

body { 
background-color:white; 
} 
.divbody { 
margin-top:12%; 
height:100%; 
padding:0; 
} 
.navdiv { 
position:fixed; 
top:0; 
right:0; 
width:100%; 
background-color:white; 
background-image:url("images/always_grey.png"); 
} 

.nav { 
list-style-type:none; 
background-color:#5f5f5f; 
margin:0; 
padding:0; 
position:relative; 
top:0; 
right:0; 
width:100%; 
font-family:"Segoe UI",Arial,sans-serif; 
font-size:17px; 
letter-spacing:1px; 
overflow:hidden; 
} 
.nav li { 
float:left; 
} 
.nav li a { 
text-decoration:none; 
color:white; 
display:block; 
padding:8px 16px; 
} 

.nav li a:hover { 
background-color:black; 

} 

.nav .dropdownlist { 
display: none; 
background-color: #f9f9f9; 
color: black; 
min-width: 160px; 
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
} 
.nav .dropdown:hover .dropdownlist { 
display: block; 
}

來源

2016-07-27 Salah Khaldoun Mousa Basha

參考以下鏈接：http://stackoverflow.com/questions/21997728/horizontal-menu-with-vertical-submenu-html-css-only – chirag

此代碼不起作用，因爲dropdownlist不是dropdown孩子，他們只是相鄰的元素，所以你需要使用+標誌，以實現什麼你要。

這裏有一個工作示例：

body { 
 
background-color:white; 
 
} 
 
.divbody { 
 
margin-top:12%; 
 
height:100%; 
 
padding:0; 
 
} 
 
.navdiv { 
 
position:fixed; 
 
top:0; 
 
right:0; 
 
width:100%; 
 
background-color:white; 
 
background-image:url("images/always_grey.png"); 
 
} 
 

 
.nav { 
 
list-style-type:none; 
 
background-color:#5f5f5f; 
 
margin:0; 
 
padding:0; 
 
position:relative; 
 
top:0; 
 
right:0; 
 
width:100%; 
 
font-family:"Segoe UI",Arial,sans-serif; 
 
font-size:17px; 
 
letter-spacing:1px; 
 
overflow:hidden; 
 
} 
 
.nav li { 
 
float:left; 
 
} 
 
.nav li a { 
 
text-decoration:none; 
 
color:white; 
 
display:block; 
 
padding:8px 16px; 
 
} 
 

 
.nav li a:hover { 
 
background-color:black; 
 

 
} 
 

 
.nav .dropdownlist { 
 
display: none; 
 
background-color: #f9f9f9; 
 
color: black; 
 
min-width: 160px; 
 
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
 
} 
 
.nav .dropdown:hover + .dropdownlist, 
 
.dropdownlist:hover { 
 
display: block; 
 
}

<div class="navdiv"> 
 
<img style="width:30%;margin-left:0;" src="images/HEH_logo_No_bd_mini.png"> 
 
<ul class="nav"> 
 
    <li><a href="">HOME</a></li> 
 
    <li><a href="about/about.html">ABOUT US</a></li> 
 
    <li > 
 
     <a class="dropdown" href="">SERVICES</a> 
 
     <div class="dropdownlist"> 
 
      <a href="">AUDIT & ASSURANCE</a> 
 
      <a href="">TAXATION</a> 
 
      <a href="">CORPORATE FINANCE</a> 
 
      <a href="">SERVICES</a> 
 
      <a href="">MANAGEMENT CONSULTING</a> 
 
      <a href="">RISK MANAGEMENT</a> 
 
      <a href="">SECTORS</a> 
 
      <a href="">HUMAN RESOURCES</a> 
 
      <a href="">ACCOUNTING, AUDIT & TAX</a> 
 
     </div> 
 
    </li> 
 
    <li><a href="">PARTNERS</a></li> 
 
    <li><a href="">CONTACT US</a></li> 
 
</ul> 
 
</div> 
 
<div class="divbody"> 
 
<p>This here will serve as <br>Some text ....</p> 
 
<p>Some text ....</p> 
 
</div> 
 
</div>

來源

2016-07-27 07:05:49 Signo

下面的變化將幫助你只顯示向下盤旋下降，但您需要很少的CSS更改，以便正確顯示下拉菜單

您需要更換以下CSS

.nav .dropdown:hover .dropdownlist { 
display: block; 
}

隨着

.nav .dropdown:hover + .dropdownlist { 
display: block; 
}

來源

2016-07-27 07:03:35 Kan412

下面是代碼。希望這會幫助你。

body { 
 
background-color:white; 
 
} 
 

 
.navdiv { 
 
position:fixed; 
 
top:0; 
 
right:0; 
 
width:100%; 
 
background-color:white; 
 
background-image:url("images/always_grey.png"); 
 
} 
 

 
ul.nav { 
 
list-style-type:none; 
 
background-color:#5f5f5f; 
 
margin:0; 
 
padding:0; 
 
position:relative; 
 
top:0; 
 
right:0; 
 
width:100%; 
 
font-family:"Segoe UI",Arial,sans-serif; 
 
font-size:17px; 
 
letter-spacing:1px; float:left; 
 
} 
 
ul.nav li { 
 
float:left; 
 
} 
 
ul.nav li a { 
 
text-decoration:none; 
 
color:white; 
 
display:block; 
 
padding:8px 16px; 
 
} 
 

 
ul.nav li a:hover { 
 
background-color:black; 
 

 
} 
 

 
ul.nav li ul.dropdownlist { 
 
display: none; 
 
background-color: #ccc; 
 
color: black; 
 
min-width: 160px; 
 
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); position:absolute; right:0; top:38px; 
 
} 
 
ul.nav li:hover ul.dropdownlist { 
 
display: block; 
 
} 
 
ul.nav li ul.dropdownlist li a { 
 
color:#333; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<link rel="stylesheet" type="text/css" href="mainpage.css"> 
 
<title>Company name</title> 
 

 
</head> 
 
<body> 
 
<div class="navdiv"> 
 
<img style="width:30%;margin-left:0;" src="images/HEH_logo_No_bd_mini.png"> 
 
<ul class="nav"> 
 
    <li><a href="">HOME</a></li> 
 
    <li><a href="about/about.html">ABOUT US</a></li> 
 
    <li> 
 
     <a class="dropdown" href="">SERVICES</a> 
 
     <ul class="dropdownlist"> 
 
      <li><a href="">AUDIT & ASSURANCE</a></li> 
 
      <li><a href="">TAXATION</a></li> 
 
      <li><a href="">CORPORATE FINANCE</a></li> 
 
      <li><a href="">SERVICES</a></li> 
 
      <li><a href="">MANAGEMENT CONSULTING</a></li> 
 
      <li><a href="">RISK MANAGEMENT</a></li> 
 
      <li><a href="">SECTORS</a></li> 
 
      <li><a href="">HUMAN RESOURCES</a></li> 
 
      <li><a href="">ACCOUNTING, AUDIT & TAX</a></li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="">PARTNERS</a></li> 
 
</ul> 
 
</div> 
 
<div class="divbody"> 
 
<p>This here will serve as <br>Some text ....</p> 
 
<p>Some text ....</p> 
 

 
</div> 
 
</body> 
 
</html>

來源

2016-07-27 07:08:20

html/css導航欄中的下拉列表未顯示

回答

相關問題