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

Posted 2023-02-24

【中文标题】下拉菜单没有显示 CSS 中的所有内容

【英文标题】：Dropdown isn't showing everything in CSS

【发布时间】：2021-09-25 13:04:23

【问题描述】：

所以我正在尝试使用我的 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/

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

【参考方案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>

【讨论】：

我最初尝试过 <div> 路线，但它更加混乱。但是你的更正成功了。谢谢！

【参考方案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;