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

我想弄清楚我的导航中的下拉列表没有显示。一世
我也试图了解如何将下拉列表呈现为类，以及如何在CSS中指定下拉列表，以免将其与我的无序列表混淆。有人可以帮忙，也许可以将一个班级添加到下拉列表中，以便我知道如何显示它？

Here is my code in Jfiddle:

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

最佳答案

在您的CSS中，您有：

/*Dropdown Nav */

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

这里的问题是，您要将每个单独的“ li”元素设置为不显示，因此隐藏了每个单独的列表项。如果显示/隐藏整个无序列表，则将显示您的元素。此外，您可能希望删除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;
}

关于html - 为什么没有显示我的整个下拉列表？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42985686/