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

【问题标题】：How to make a nested sub menu on horizontal navigation bar vertical?如何使水平导航栏上的嵌套子菜单垂直？
【发布时间】：2017-04-18 19:15:20
【问题描述】：

所以我创建了一个水平导航栏，但我希望子菜单在悬停时垂直显示，但无论我尝试了什么，它仍然水平显示。

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

我浏览过的大多数网站或答案都说将 display:block 放在嵌套子菜单上，但我试过了，它仍然水平显示，任何帮助都将不胜感激！

【问题讨论】：

标签： html css navigation submenu

【解决方案1】：

尝试这样的事情。添加以下css

.dropdown li{
  float: none !important;
}

像这样在您的子菜单UL 中添加.dropdown 类。

<ul class="dropdown">

【讨论】：

【解决方案2】：

将 display flex 和 flex-direction 放在子菜单本身的包装上。

看看这个

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 {
	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>

【讨论】：

【解决方案3】：

我已经更改了你的代码，尝试使用这个答案，我已经删除了嵌套的 li 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;
	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>

【讨论】：