悬停和列表上的下拉菜单

Question

我目前正在尝试使用列表创建垂直导航栏，但是我运行遇到了问题，当我将鼠标悬停在 ul 上时，li 中的所有下拉菜单都会显示或不显示出现在所有。有解决办法吗？

HTML:

<body>
    <div class="navbar">
        <ul>
            <li>title</li>
            <li>main text</li>
                <div class="dropdown-content">
                    <a href="#">text</a>
                    <a href="#">text</a>
                    <a href="#">text</a>
                </div>
            <li>main text</li>
                <div class="dropdown-content">
                    <a href="#">text</a>
                    <a href="#">text</a>
                    <a href="#">text</a>
                </div>
            <li>main text</li>
                <div class="dropdown-content">
                    <a href="#">text</a>
                    <a href="#">text</a>
                    <a href="#">text</a>
                </div>
        </ul>
    </div>
</body>

CSS:

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

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    border-radius: 15px;
}

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

.dropdown-content a:hover {
    background-color: #f1f1f1;
    border-radius: 15px;
}

.navbar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    border: 1px solid #000000;
    float: left;
    border-radius: 25px;
    background-color: #9cddf0;
    height: 500px;
    overflow: hidden;
    line-height: 35px;
}

.navbar ul li {
    display: block;
    color: #000000;
    padding: 0px;
    text-decoration: none;
    text-align: left;
    padding-left: 5px;
}

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

在 CSS 的最后三行，如果我将其更改为 .navbar ul li:hover .dropdowncontent，下拉菜单根本不会显示。

在 HTML 中，如果我将下拉内容放在 li 中，接下来应该出现在列表中的两个内容就会超出框。

提前致谢。

Answer 1

您没有为您的内容元素提供任何类型的上下文。现在，正如您的 CSS 所写，所有下拉菜单都将在悬停时可见，因为您明确表示要显示所有下拉菜单。

所以基本上您需要做的是将您的内容元素放在 li 中并为其悬停选择器设置样式。顺便说一句，仅供以后参考，无序列表的children只能是li，否则无效HTML.

https://jsfiddle.net/eo0shney/

<div class="navbar">
<ul>
<li>title</li>
<li>
  main text
  <div class="dropdown-content">
    <a href="#">text</a>
    <a href="#">text</a>
    <a href="#">text</a>
  </div>
</li>
<li>
  main text
  <div class="dropdown-content">
    <a href="#">text</a>
    <a href="#">text</a>
    <a href="#">text</a>
  </div>
</li>
<li>
  main text
  <div class="dropdown-content">
    <a href="#">text</a>
    <a href="#">text</a>
    <a href="#">text</a>
  </div>
</li>

悬停和列表上的下拉菜单

Dropdown menus on hover and lists

html

css

menu

html-lists

navbar