如何在水平导航栏垂直上制作嵌套子菜单

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

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

我经历的大多数网站或答案都说明了显示：嵌套子菜单上的块，但我尝试了它，但它仍然水平显示，任何帮助都将不胜感激！

我已经更改了您的代码，请尝试以下答案，我删除了嵌套的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>

将显示flex和flex方向放在子菜单本身上。

检查一下

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>

尝试这样的东西。添加以下CSS

.dropdown li{
  float: none !important;
}

sub-menu UL中添加 .dropdown类。

<ul class="dropdown">

相关内容

最新更新

热门标签：