Навигационное выпадающее меню не работает должным образом в контейнере flexbox

Question

Я пытаюсь сделать полноразмерную навигацию с выпадающим списком css.

Все работает хорошо, но у меня есть одна проблема: поскольку навигация должна быть полной ширины, все элементы должны иметь одинаковые width друг с другом. Итак, что я сделал, был разделен width: 100% всеми li. На данный момент это нормально, но если мне нужно добавить еще один элемент, я должен снова рассчитать width пунктов.

Я хотел бы использовать flexbox, так что, если я добавлю другой элемент, он автоматически выведет товар на все width из ul. Но когда я пытался это сделать, это не получается, как мне хотелось бы. Он показывает все 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; 
} 

Это не удаляет суб-Nav от нормального поток, поэтому все меню идет вниз с ним при наведении.

Вместо этого используйте 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