html - 粘性下拉菜单。 (溢出)

Question

我想要一个包括下拉菜单的粘性导航栏。但是，当我将鼠标悬停在它上面时，下拉菜单没有显示。

如果我删除 overflow: hidden;在无序列表中，当我向下滚动时，导航栏设法保持在顶部，但是导航栏是不可见的，只有当我将鼠标悬停在它上面时才会显示(不包括主页按钮)。如果我只删除位置:粘性；它也有效，但我希望它具有粘性。

ul {
     list-style-type: none;
     margin: 0;
     padding: 0;
     background-color: grey;
     position:sticky;
     position: -webkit-sticky; /* Safari */
     overflow: hidden;
     top: 0;
     font-size: 20px;
     width: 100%;
}
li {
  float: left;
}
li a, .dropbtn {
   display: inline-block;
   color: white;
   text-align: center;
   padding: 14px 20px;
   text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
     background-color: darkgrey;
}
li.dropdown {
    display: inline-block;
}    
.active {
    background-color: lightblue;
}
.dropdown-content {
   display: none;
   position: absolute;
   background-color: #f9f9f9;
   min-width: 160px;
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
   z-index: 1;
}
.dropdown-content a {
   color: black;
   padding: 12px 16px;
   text-decoration: none;
   display: block;
   text-align: left;
}
.dropdown-content a:hover {
    background-color: #f1f1f1;
}
.dropdown:hover .dropdown-content {
    display: block;
}

<ul>
  <li>
    <a href="#home" class="active">Home</a>
  </li>
  <li class="dropdown">
    <a href="#simulationen" class="dropbtn">Simulationen</a>
    <div class="dropdown-content">
      <a href="#">Pendel</a>
      <a href="#">Hebel</a>
    </div>
  </li>
  <li><a href="#übungsaufgaben">Übungsaufgaben</a></li>
  <li style ="float:right"><a href="#links">Links</a></li>
</ul>

我希望导航栏是粘性的并且能够下拉子导航，但无论哪种方式解决问题，都会出现新问题。

Answer 1

将 display:inline-block; 添加到您的 ul 样式中，并从中删除 overflow:hidden。这将允许子菜单显示在 ul 之外。

请参阅下面的代码段:

ul {
     list-style-type: none;
     margin: 0;
     padding: 0;
     background-color: grey;
     position:sticky;
     position: -webkit-sticky; /* Safari */
     /*overflow: hidden;*/
     top: 0;
     font-size: 20px;
     width: 100%;
     display:inline-block;
}
li {
  float: left;
}
li a, .dropbtn {
   display: inline-block;
   color: white;
   text-align: center;
   padding: 14px 20px;
   text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
     background-color: darkgrey;
}
li.dropdown {
    display: inline-block;
}    
.active {
    background-color: lightblue;
}
.dropdown-content {
   display: none;
   position: absolute;
   background-color: #f9f9f9;
   min-width: 160px;
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
   z-index: 1;
}
.dropdown-content a {
   color: black;
   padding: 12px 16px;
   text-decoration: none;
   display: block;
   text-align: left;
}
.dropdown-content a:hover {
    background-color: #f1f1f1;
}
.dropdown:hover .dropdown-content {
    display: block;
}

<ul>
  <li>
    <a href="#home" class="active">Home</a>
  </li>
  <li class="dropdown">
    <a href="#simulationen" class="dropbtn">Simulationen</a>
    <div class="dropdown-content">
      <a href="#">Pendel</a>
      <a href="#">Hebel</a>
    </div>
  </li>
  <li><a href="#übungsaufgaben">Übungsaufgaben</a></li>
  <li style ="float:right"><a href="#links">Links</a></li>
</ul>

<div>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.


Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
 </div>