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

Question

我想弄清楚我的导航栏中的下拉列表没有显示。我我还试图了解如何将下拉列表呈现为 class 以及如何在 CSS 中指定它以免与我的任何无序列表混淆。有人可以帮忙并可能在下拉列表中添加 class 以便我知道如何显示它吗？

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;
}

这里的问题是你将每个 individual "li" 元素设置为显示 none，所以你将每个隐藏在 dividual 列表中物品。如果你 show/hide 整个无序列表，那么你的元素就会出现。此外，您可能想要删除 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/

它是 ul li:hover ul li 上的 position: absolute; 将其更改为 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

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

Why isnt my entire dropdown list displaying?

html

css

nav

drop-down-menu