html - 位置固定下拉菜单

Question

我创建了一个位置固定的下拉菜单，但是当我去选择一个下拉内容时，整个菜单栏都折叠起来了。请参阅所附图片。

如何创建一个位置固定的下拉菜单，下拉菜单的内容不影响菜单栏？

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #003746;
  position: fixed;
  top: 0;
}

li {
  float: left;
}

li a,
.dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  border-radius: 42px;
}

li a:hover,
.dropdown:hover .dropbtn {
  background-color: green;
  border-radius: 42px;
}

li.dropdown {
  display: inline-block;
  color: white
}

.dropdown-content {
  display: none;
  position: static;
  background-color: #003746;
  min-width: 16px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: green
}

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

<ul>
  <li><img class="center" width="80" height="50" title="Example"></li>
  <li class="dropdown">
    <a class="dropbtn">AAA</a>
    <div class="dropdown-content">
      <a>AAA - AAA</a>
      <a>AAA1 - AAA1</a>
    </div>
  </li>
  <li class="dropdown">
    <a class="dropbtn">BBB</a>
    <div class="dropdown-content">
      <a>BBB - BBB</a>
      <a>BBB1 - BBB1</a>
    </div>
  </li>
</ul>

Answer 1

您必须设置 position: absolute;在 dropdown-content 类中。然后它会起作用。 position: static;是任何元素的初始位置。

哦，删除 overflow: hidden;来自 ul 元素。如果您保留该属性，您基本上就是在说。 “任何从我的容器里出来的东西，躲起来!”。

如果保留该属性，dropdown-content 菜单将设置为 display: block;但不可见，因为它被其父元素(<ul> 元素)隐藏了。

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #003746;
  position: fixed;
  top: 0;
}

li {
  float: left;
}

li a,
.dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  border-radius: 42px;
}

li a:hover,
.dropdown:hover .dropbtn {
  background-color: green;
  border-radius: 42px;
}

li.dropdown {
  display: inline-block;
  color: white
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #003746;
  min-width: 16px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: green
}

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

<ul>
  <li><img class="center" width="80" height="50" title="Example"></li>
  <li class="dropdown">
    <a class="dropbtn">AAA</a>
    <div class="dropdown-content">
      <a>AAA - AAA</a>
      <a>AAA1 - AAA1</a>
    </div>
  </li>
  <li class="dropdown">
    <a class="dropbtn">BBB</a>
    <div class="dropdown-content">
      <a>BBB - BBB</a>
      <a>BBB1 - BBB1</a>
    </div>
  </li>
</ul>