如何使垂直水平导航栏上的嵌套子菜单？

所以我创建了一个水平导航栏，但我希望子菜单在悬停时垂直显示，但无论我尝试过，它仍然水平显示。如何使垂直水平导航栏上的嵌套子菜单？

这里是我的代码的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

如何使垂直水平导航栏上的嵌套子菜单？

回答

相关问题