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

Question

我正在尝试使用css下拉菜单制作全宽导航。

它工作正常，但我有一个担心：因为导航必须是全宽度，所有项目必须有相同的width。所以，我所做的是将所有li的width: 100%分开。目前这没什么问题，但如果我必须添加另一个项目，我必须再次计算width。

我想要的是使用flexbox，所以如果我添加另一个项目，它会自动对齐ul的整个width的项目。但是当我试图这样做时，结果并不是我想要的。当它悬停在物品上时，它显示整个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 */ 
} 

...来自主容器取出overflow: hidden：

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

revised fiddle