位置固定下拉菜单

Question

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

如何创建正确的位置固定下拉菜单，其中下拉内容不会影响菜单栏？

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

您必须在下拉内容类上设置position: absolute;。然后它会工作。 position: static;是任何元素的初始位置。

哦，从 ul 元素中删除overflow: hidden;。如果你保留这个财产，你基本上是在说。 ＆＃34;任何从我的容器中出来的东西都隐藏起来！＆＃34;。

如果您保留该属性，下拉内容菜单将设置为display: block;但不可见，因为它被其父元素隐藏（<ul>元素）。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;