Question

我正在尝试使用css下拉列表进行全角导航。

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

我想要的是使用flexbox，因此如果我添加其他项目，它会自动对齐width ul的{{1}}项。但是，当我试图这样做时，它并不是我想要的。当鼠标悬停在某个项目上时，它会显示整个ul。

目前它没有必要回应。

在我的代码下方，我添加了一个jsfiddle，其中包含flexbox将显示错误的内容。

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 */
}

AND ...从主容器中删除overflow: hidden：

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

revised fiddle

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

1 个答案: