使用HTML和CSS的悬停下拉菜单

Question

我已经在线下载了boostrap模板，并且正在对该模板进行修改。但是，我希望菜单栏中的菜单栏上的每个项目都可以悬浮在下拉菜单中。对于下拉菜单的CSS，我有这个功能：

.dropdown {
position: relative;
display: inline-block;
}

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

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

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

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: #3e8e41;}

这是html部分：

<ul class="navbar-nav text-uppercase ml-auto dropdown">
    <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#services">Services</a></li>
    <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#experts">Experts</a>
    <ul class="dropdown-content">
        <li><a href="#">Test dropdown</a></li>
    </ul>
    </li>
</ul>

我一直只是在网上遵循说明，但似乎无法正确处理。

这是我一直得到的输出：

即使光标没有悬停在菜单上，它也会显示子菜单。

Answer 1

您忘了将dropdown类添加到您的nav-item：

<ul class="navbar-nav text-uppercase ml-auto">
    <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#services">Services</a></li>
    <li class="nav-item dropdown"><a class="nav-link js-scroll-trigger" href="#experts">Experts</a>
    <ul class="dropdown-content">
        <li><a href="#">Test dropdown</a></li>
    </ul>
    </li>
</ul>

然后，如果您将鼠标悬停在选择器上，则需要使用>指定直接子级。

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