如何使垂直水平導航欄上的嵌套子菜單？

所以我創建了一個水平導航欄，但我希望子菜單在懸停時垂直顯示，但無論我嘗試過，它仍然水平顯示。如何使垂直水平導航欄上的嵌套子菜單？

這裏是我的代碼的jsfiddle：https://jsfiddle.net/ma85nbgx/

而下面是我的HTML和CSS。

HTML

<div class="nav"> <!-- Start of Nav Bar --> 
    <ul> 
     <li class="home"><a href="#">HOME</a></li> 
     <li class="aboutus"><a href="#">ABOUT&nbsp;US</a></li> 
     <li class="services"><a href="#">SERVICES</a> 
      <ul> 
       <li class="programs"><a href="#">PROGRAMS</a></li> 
       <li class="events"><a href="#">EVENTS</a></li> 
      </ul> 
     </li> 
     <li class="resources"><a href="#">RESOURCES</a></li> 
     <li class="getinvolved"><a href="#">GET&nbsp;INVOLVED</a></li> 
     <li class="contactus"><a href="#">CONTACT&nbsp;US</a></li> 
    </ul> 
</div>

CSS

.nav ul { 
    list-style: none; 
    text-align: center; 
    padding: 0; 
    margin: 0; 
} 

.nav ul li { 
    font-family: 'Roboto', sans-serif; 
    border-bottom: none; 
    height: 86px; 
    line-height: 86px; 
    font-size: 14px; 
    display: inline-block; 
    float:left; 
    margin: 0 auto; 
} 

.nav ul li a { 
    text-decoration: none; 
    color:#000000; 
    display: block; 
    transition: .3s background-color; 
    padding:0 24px; 
} 

.nav ul li a:hover { 
    background-color: #5c89c7; 
    color:#FFFFFF; 
} 

.nav a { 
    border-bottom:none; 
} 

.nav li ul { 
    position:absolute; 
    display:none; 
    width:inherit; 
} 

.nav li:hover ul { 
    display:block; 
} 

.nav ul li ul li { 
    display: block; 
}

大多數網站或回答我通過說把顯示器去：塊嵌套子菜單上，但我試過了，它仍然橫向顯示，任何幫助，將不勝感激！

來源

2016-12-04 Eden Chew

我已經改變了你的代碼點點嘗試這樣的回答，我已經刪除嵌套李float:left，請檢查下面的css我添加了一些新的生產線

.nav ul { 
 
    list-style: none; 
 
    text-align: center; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.nav ul li { 
 
    font-family: 'Roboto', sans-serif; 
 
    border-bottom: none; 
 
    height: 86px; 
 
    line-height: 86px; 
 
    font-size: 14px; 
 
    display: inline-block; 
 
    float:left; 
 
    margin: 0 auto; 
 
} 
 

 
.nav ul li a { 
 
    text-decoration: none; 
 
    color:#000000; 
 
    display: block; 
 
    transition: .3s background-color; 
 
    padding:0 24px; 
 
} 
 

 
.nav ul li a:hover { 
 
    background-color: #5c89c7; 
 
    color:#FFFFFF; 
 
} 
 

 
.nav a { 
 
    border-bottom:none; 
 
} 
 

 
.nav li ul { 
 
    position:absolute; 
 
    display:none; 
 
    width:inherit; 
 
\t text-align:left; 
 
} 
 

 
.nav li:hover ul { 
 
    display:block; 
 
} 
 

 
.nav ul li ul li { 
 
    display: block; 
 
    float:none !important; /* newly added */ 
 
    height:auto; /* newly added */ 
 
    line-height:34px; /* newly added */ 
 
}

<!doctype html> 
 
<html> 
 
<head> 
 
<meta charset="utf-8"> 
 
<title>Untitled Document</title> 
 
</head> 
 

 
<body> 
 

 
<div class="nav"> <!-- Start of Nav Bar --> 
 
    <ul> 
 
     <li class="home"><a href="#">HOME</a></li> 
 
     <li class="aboutus"><a href="#">ABOUT&nbsp;US</a></li> 
 
     <li class="services"><a href="#">SERVICES</a> 
 
      <ul> 
 
       <li class="programs"><a href="#">PROGRAMS</a></li> 
 
       <li class="events"><a href="#">EVENTS</a></li> 
 
      </ul> 
 
     </li> 
 
     <li class="resources"><a href="#">RESOURCES</a></li> 
 
     <li class="getinvolved"><a href="#">GET&nbsp;INVOLVED</a></li> 
 
     <li class="contactus"><a href="#">CONTACT&nbsp;US</a></li> 
 
    </ul> 
 
</div> 
 

 
</body> 
 
</html>

來源

2016-12-04 08:21:43

嘗試類似這樣的事情。添加以下的CSS

.dropdown li{ 
    float: none !important; 
}

在子菜單UL這樣添加.dropdown類。

<ul class="dropdown">

來源

2016-12-04 08:00:31

放顯示器撓性和你的子菜單本身的包裹彎曲方向。

檢查了這一點

nav ul { 
 
    list-style: none; 
 
    text-align: center; 
 
    padding: 0; 
 
    margin: 0; 
 
    width:100%; 
 
    display:flex; 
 
    flex-direction:row; 
 
    flex-wrap:wrap; 
 
} 
 

 
nav ul li { 
 
    font-family: 'Roboto', sans-serif; 
 
    border-bottom: none; 
 
    height: 86px; 
 
    line-height: 86px; 
 
    font-size: 14px; 
 
    margin: 0 auto; 
 
    position:relative; 
 
} 
 

 
nav ul li a { 
 
    text-decoration: none; 
 
    color:#000000; 
 
    display: block; 
 
    transition: .3s background-color; 
 
    padding:0 24px; 
 
} 
 

 
nav ul li a:hover { 
 
    background-color: #5c89c7; 
 
    color:#FFFFFF; 
 
} 
 

 
nav a { 
 
\t border-bottom:none; 
 
} 
 

 

 

 

 
nav .withSubMenu ul{ 
 
    display: none; 
 
} 
 

 

 
.withSubMenu:hover ul { 
 
    display:flex; 
 
    width:100%; 
 
    flex-direction:column; 
 
}

<nav> <!-- Start of Nav Bar --> 
 
<ul> 
 
<li class="home"><a href="#">HOME</a></li> 
 
<li class="aboutus"><a href="#">ABOUT&nbsp;US</a></li> 
 
<li class="services withSubMenu"><a href="#">SERVICES</a> 
 
    <ul> 
 
    <li class="programs"><a href="#">PROGRAMS</a></li> 
 
    <li class="events"><a href="#">EVENTS</a></li> 
 
    </ul> 
 
</li> 
 
<li class="resources"><a href="#">RESOURCES</a></li> 
 
<li class="getinvolved"><a href="#">GET&nbsp;INVOLVED</a></li> 
 
<li class="contactus"><a href="#">CONTACT&nbsp;US</a></li> 
 
</ul> 
 
</nav>

來源

2016-12-04 08:10:33 Obink

如何使垂直水平導航欄上的嵌套子菜單？

回答

相關問題