Question

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

这是我的代码的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，但我尝试了它，它仍然水平显示，任何帮助都将不胜感激！

Answer 1

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

.dropdown li{
  float: none !important;
}

在您的子菜单.dropdown中添加UL课程。

<ul class="dropdown">

Answer 2

我已经改变了你的代码一点点尝试这个答案，我删除了嵌套的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>

Answer 3

将显示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 个答案: