下拉菜单没有显示 CSS 中的所有内容

Question

所以我正在尝试使用我的 Django 应用程序中的下拉菜单制作一个基本的导航菜单。我的菜单很好，但下拉菜单不想显示所有链接。

如何解决这个问题？

HTML

    <nav role="navigation">
      <ul>
        <li><a href="">Chat Home</a></li>
        <li><a href="" aria-haspopup="true">Go To <i class="fa fa-caret-down"></i></a>
          <ul class="dropdown" aria-label="submenu">
            <li><a href="" target="_blank">Calendar</a></li>
            <li><a href=" " target="_blank">Big Blue</a></li>
          </ul>
        </li>
        <li><a href="" style="float: right">Logout</a></li>
      </ul>
    </nav>

CSS

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #333;
  position: sticky;
  position: -webkit-sticky;
  width: 100%;
  height: 1.5rem;
}

li {
  float: left;
  font-size: 1rem;
  padding: 0.25rem 1rem;
  letter-spacing: 1.5px;
  cursor: pointer;
  display: block;
  position: relative;
}

li a {
  color: white;
  text-decoration: none;
  text-align: center;
}

ul li ul li {
  display: block;
  padding: 0.25rem 1rem;
}

li:hover,
li:focus-within {
  background-color: black;
}

li:focus-within a {
  outline: none;
}

ul li ul {
  display: none;
  background-color: #333;
  position: absolute;
  visibility: hidden;
  left: 0;
  margin-top: 2px;
}
ul li:hover > ul,
ul li:focus-within > ul,
ul li ul:hover,
ul li ul:focus {
  display: block;
  visibility: visible;
}

你可以在这里看到我的意思：https://jsfiddle.net/rj269hsf/

但本质上，当我将鼠标悬停在“转到”项目上时，它会将第一个列出的项目放在它下面。查看第二个的唯一方法是向下移动并悬停在它应该在的位置，然后它就会显示出来。

Answer 1

您可以通过将下拉列表<ul> 包装在<div> 中来解决此问题。我还为带有下拉菜单的导航项指定了 .dropdown-btn 类，以使 CSS 更易于理解。

您使用的ul li:hover > ul 选择器也不正确 - 我将其替换为.dropdown-btn:hover ul，它选择ul，它是.dropdown-btn 的子对象，但仅当它悬停时。

最后，您不需要同时使用 visibility 和 display 来隐藏下拉菜单，只需 display: none 即可。

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #333;
  position: sticky;
  position: -webkit-sticky;
  width: 100%;
  height: 1.5rem;
}

li {
  float: left;
  font-size: 1rem;
  padding: 0.25rem 1rem;
  letter-spacing: 1.5px;
  cursor: pointer;
  display: block;
  position: relative;
}

li a {
  color: white;
  text-decoration: none;
  text-align: center;
}

/*ul li ul li {
  display: block;
  padding: 0.25rem 1rem;
}*/

li:hover,
li:focus-within {
  background-color: black;
}

/*li:focus-within a {
  outline: none;
}*/

.dropdown {
  display: none;
  background-color: #333;
  position: absolute;
  left: 0;
  margin-top: 2px;
}
/*ul li:hover > ul,
ul li:focus-within > ul,
ul li ul:hover,
ul li ul:focus {
  display: block;
  visibility: visible;
}*/

.dropdown-btn:hover .dropdown {
  display: block;
}

<nav role="navigation">
   <ul>
      <li><a href="">Chat Home</a></li>
      <li class="dropdown-btn">
         <a href="" aria-haspopup="true">Go To <i class="fa fa-caret-down"></i></a>
         <div class="dropdown">
            <ul aria-label="submenu">
               <li><a href="" target="_blank">Calendar</a></li>
               <li><a href=" " target="_blank">Big Blue</a></li>
            </ul>
         </div>
      </li>
      <li><a href="" style="float: right">Logout</a></li>
   </ul>
</nav>

Answer 2

您只需将两个属性 width 和 height 添加到类 .dropdown 即在您的 CSS ul li ul 中。 JSFiddle

ul li ul {
  /* already mentioned styles */
  width: fit-content;
  width: -moz-fit-content; /* Firefox support */
  height: fit-content;
  height: -moz-fit-content;
}