Question

我正试图弄清楚导航中的下拉列表没有显示。一世我也试图理解如何将下拉列表作为一个类进行渲染，以及如何在CSS中指定它以免与我的任何无序列表混淆。有人可以请帮助，并可能在下拉列表中添加一个类，所以我知道如何显示它？

Here is my code in Jfiddle:

https://jsfiddle.net/CheckLife/rzxxb2kb/4/

Answer 1

在你的CSS中你有：

/*Dropdown Nav */

ul li ul li {
    display: none;
}
ul li:hover ul li {
    display: block;
    position: absolute;
}

这里的问题是你要将每个“li”元素设置为none，因此你隐藏了每个单独的列表项。如果显示/隐藏整个无序列表，则会显示您的元素。此外，您可能希望删除position：absolute以便它们垂直堆叠

/*Dropdown Nav */

ul li ul {
    display: none;
}
ul li:hover ul {
    display: block;
}

编辑：为了解决列表推送所有内容的问题，我建议不要使用ul。相反，您可以将每个标记放在div中并执行以下操作：

HTML：

      <li onmouseover="newText()"><a href="#">Players</a>               
        <div class="dropdown-content">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
      </li>

CSS：

.dropdown-content {
  display: none;
  position: absolute;
  // The below was copied from your other css
  background-color: #3b63d3;
  width: 90px;
  text-align: center;
  border-right: 1px groove #141e38;
}
li:hover .dropdown-content {
    display: block;
}

Answer 2

https://jsfiddle.net/rzxxb2kb/5/

position: absolute;上的ul li:hover ul li将其更改为position: relative;

/*Dropdown Nav */

ul li ul li{
    display: none;
}
ul li:hover ul li {
    display: block;
    position: relative;
}

.clear {
    clear: both;
}

Answer 3

W3Schools展示了如何使用下拉功能创建导航栏

https://www.w3schools.com/css/css_dropdowns.asp

为什么我的整个下拉列表都没有显示？

3 个答案: