Question

我试图获取导航栏的下拉菜单，这样当我将鼠标悬停在标签上时，它会打开一个包含更多选项的下拉菜单。这是我的代码fiddle。最终的产品应该看起来像this，现在我只想修复悬停部分的下拉。

以下是我在css中使用的代码片段，用于尝试实现此目的：

.dropdown {
    display: none
}

.navbar-list li:hover .dropdown {
    display: relative;
    color: white;
    text-decoration: none;
}

Answer 1

你正在尝试错误的方法，请改变你的css部分

.navbar-list li:hover .dropdown {
    display: block;
    color: white;
    text-decoration: none;
}


<ul class="navbar-list">
    <li class="navbar-tags"><a href="#">OUR DNA</a>
    <ul class="dropdown">
        <li><a href="">Risk</a></li>
</ul>
   </li>

<强> update code

Answer 2

1）您的HTML结构错误。

2）使用display: block代替display: relative。

像以下一样更改您的代码：

＆＃13;

.dropdown {
    display: none
}

.navbar-list li:hover > .dropdown {
    display: block;
    color: white;
    text-decoration: none;
}

.navbar-list a {
    color: black;
    text-decoration: none;
}

.navbar-tags {
    padding: 0;
    list-style-type: none;
    margin: 20px;
}

＆＃13;

<ul class="navbar-list">
            <li class="navbar-tags"><a href="#">OUR DNA</a>
            <ul class="dropdown">
                <li><a href="">Risk</a></li>
            </ul>
            </li>
            <li class="navbar-tags"><a href="#">PROGRAMS</a>
            <ul class="dropdown">
                <li><a href="">Professional</a></li>
            </ul>
            <ul class="dropdown">
                <li><a href="">Adventure Sport</a></li>
            </ul>
            <ul class="dropdown">
                <li><a href="">Entertainment</a></li>
            </ul>
            <ul class="dropdown">
                <li><a href="">Collegiate</a></li>
            </ul>
            <ul class="dropdown">
                <li><a href="">Individual</a></li>
            </ul>
            <ul class="dropdown">
                <li><a href="">Commercial</a></li>
            </ul>
            </li>
            <li class="navbar-tags"><a href="#">RESEARCH</a>
            <ul class="dropdown">
                <li><a href="">Corporate Survey</a></li>
            </ul>
            <ul class="dropdown">
                <li><a href="">Individual Survey</a></li>
            </ul>
            </li>
            <li class="navbar-tags"><a href="#">STORIES</a></li>
        </ul>

＆＃13;

Answer 3

您的HTML结构有误，您需要在悬停时使用display: block，而不是display: relative

但重新：HTML，ul不能成为ul的直接子项。您需要将下拉列表嵌套在li中。这不仅是正确的标记，而且当您将鼠标悬停在具有嵌套菜单的li上时，它允许悬停持续存在。否则，您需要使用li:hover + .dropdown来显示下一个.dropdown菜单，但一旦您的鼠标离开:hover，您的li就会停止。

此外，单个嵌套导航元素中的每个ul.dropdown可能只是单个li的{{1}}，但你拥有的不是不正确的，所以我没有改变。

ul

.dropdown {
  display: none
}

.navbar-tags:hover > .dropdown {
  display: block;
  color: white;
  text-decoration: none;
}

.navbar-list a {
  color: black;
  text-decoration: none;
}

.navbar-tags {
  margin: 20px;
}

.navbar-tags, .dropdown { 
  padding: 0;
  list-style-type: none;
}

使用css在悬停时展开下拉菜单

3 个答案: