Question

我能够让我的下拉菜单完美运行，唯一的问题是我无法弄清楚如何添加另一个下拉级别。

例如，当我将鼠标悬停在Test3上时，我希望另一个级别下降。我在代码中缺少什么？

CSS：

<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

li {
float: left;
}

li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}

li.dropdown {
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
display: block;
}
</style>

HTML：

<nav>
<ul id="menu">

<li class="dropdown">
<a href="#" class="dropbtn">Location</a>
<div class="dropdown-content">
<a href="#">Test1</a>
<a href="#">Test2</a>
<a href="#">Test3</a>
</div>  
</ul>
</nav>

Answer 1

也许你没有关闭li标签？在里面放置一个div似乎让事情变得复杂。我认为如果你创建一个新级别只是将所有内容包装在ul-li-ul循环中会更容易。像这样：

然后隐藏它并在悬停时显示：

<ul id="menu">
    <li><a href="#">SOMETHING LV1</a></li>
    <li><a href="#">SOMETHING LV1</a></li>
    <li><a href="#">DROPDOWN 1</a>
      <ul>
        <li><a href="#">SOMETHING LV2</i></a></li>
        <li><a href="#">DROPDOWN 2</i></a>
          <ul>
            <li><a href="#">SOMETHING LV3</a></li>
          </ul>
        </li>
      </ul>
    </li>
</ul>

所以你可以有两个或三个级别，没问题。请参阅小提琴示例：https://jsfiddle.net/fp1x1v05/ 希望这会有所帮助。

Answer 2

很抱歉，在此之前发布了一个答案并没有隔离链接。

理想情况下，您想要做的是在包含链接的元素上定位悬停事件，然后在选择器中使用更多特异性。

试试这个：

<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

li {
float: left;
}

li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}

li.dropdown {
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropdown-content ul li {
    display: none;
}
.dropdown:hover .dropdown-content li:hover ul li {
    display: block;
}
</style>
<nav>
<ul id="menu">

<li class="dropdown">
<a href="#" class="dropbtn">Location</a>
<ul class="dropdown-content"><li><a href="#">Test1</a><ul><li>Subtest 1</li></ul></li>
<li><a href="#">Test2</a></li>
<li><a href="#">Test3</a></li></ul>
</ul>
</nav>

使用CSS的多层下拉菜单

2 个答案: