html - 导航下拉菜单在 Flexbox 容器中无法正常工作

Question

我正在尝试使用 css 下拉菜单进行全 Angular 导航。

一切正常，但我有一个问题:因为导航必须是全宽度，所以所有元素必须具有相同的宽度。因此，我所做的是将 width: 100% 除以所有 li。现在这很好，但如果我必须添加另一个元素，我必须再次计算元素的宽度。

我想要的是使用flexbox，所以如果我添加另一个元素，它会自动对齐ul的整个宽度上的元素.但当我尝试这样做时，结果却并非我所愿。当鼠标悬停在某个元素上时，它会显示其下方的整个 ul。

目前它不必具有响应性。

在我的代码下面，我添加了一个带有 flexbox 的 jsfiddle，它将显示错误所在。

ul.nav-dropdown {
  display: flex;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {}

ul li:hover {
  background-color: #3f3f3f !important;
}

ul.nav-dropdown li {
  flex: 1;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  position: relative;
  border: 2px solid #DC0644;
  font-family: sans-serif, arial;
  background-color: #333;
}

ul li a {
  display: block;
  color: white;
  text-align: center;
  padding: 15px 5px;
  text-decoration: none;
}

ul.nav-dropdown>li:first-child {
  border-left: 4px solid #DC0644;
}

ul.nav-dropdown>li:last-child {
  border-right: 4px solid #DC0644;
}

ul.dropdown-content {
  position: absolute;
  display: none;
  z-index: 1;
}

ul.dropdown-content li {
  width: 100%;
  border: 0px solid black;
  border-bottom: 2px solid #DC0644;
  ;
}

ul.dropdown-content li:first-child {
  border-top: 2px solid #DC0644;
}

ul.dropdown-content li:last-child {
  border-bottom: 0px solid black;
}

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

<nav>
  <ul class="nav-dropdown">

    <li class="dropdown"><a id="imperium" href="#imperium">Imperium</a>

      <ul class="dropdown-content">
        <li><a href="#sub">Wie zijn wij?</a></li>
        <li><a href="#sub1">Vrijwilligers</a></li>
        <li><a href="#sub2">Plattegrond</a></li>
      </ul>

    </li>

    <li class="dropdown"><a id="lidworden" href="#lidworden">lid worden</a>

      <ul class="dropdown-content">
        <li><a href="#sub">Proces</a></li>
        <li><a href="#sub1">Inschrijfformulier</a></li>
      </ul>

    </li>

    <li class="dropdown"><a id="agenda" href="#agenda">Agenda</a>

      <ul class="dropdown-content">
        <li><a href="#sub">Vooruitzicht</a></li>
        <li><a href="#sub1">Archief</a></li>
      </ul>

    </li>

    <li class="dropdown"><a id="gallerij" href="#gallerij">Gallerij</a>

      <ul class="dropdown-content">
        <li><a href="#sub">Foto's</a></li>
        <li><a href="#sub1">Video's</a></li>
      </ul>

    </li>

    <li><a id="contact" href="#nieuwsbrief">Contact</a></li>
    <li><a id="nieuwsbrief" href="#nieuwsbrief">Nieuwsbrief</a></li>

  </ul>
</nav>

https://jsfiddle.net/63frrrwv/1/

Answer 1

它不适用于子容器上的 position:relative:

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

这不会从正常流程中删除子导航，因此悬停时整个菜单都会随之下降。

相反，使用position:absolute:

.dropdown:hover .dropdown-content {
  display: block;
  position: absolute; /* new */
  width: 100%; /* new */
}

并且...从主容器中删除overflow:hidden:

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  /* overflow: hidden; */
}

revised fiddle