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里面并设置它的悬停选择器。顺便说一句，仅供将来参考，无序列表只能将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>

悬停列表中的下拉菜单

1 个答案: