z-index не работает с вложенными абсолютными элементами

Question

Я пытаюсь разработать выпадающий список, содержащий список ul, который можно расширить. Элемент списка отображается по умолчанию. Когда список расширяется, все элементы должны быть видимыми и должны располагаться над выпадающим списком. Я прикрепил фрагмент и, как вы можете видеть, список расширяется, но элементы li не находятся над выпадающим меню, хотя ul имеет абсолютное положение и больше z-index.

var dropdown = false; 
 
var list = false; 
 

 
function toggleList() { 
 
    toggle('.hidden', list); 
 
    list = !list; 
 
} 
 

 
function toggleDropdown() { 
 
    toggle('.dropdown', dropdown); 
 
    dropdown = !dropdown; 
 
} 
 

 
function toggle (selector, isAlreadyOpened) { 
 
    if(isAlreadyOpened) $(selector).hide(); 
 
    else $(selector).show(); 
 
}

.parent { 
 
    position: relative; 
 
    background-color: red; 
 
    width: 50%; 
 
} 
 

 
.dropdown { 
 
    width: 40%; 
 
    height: 100px; 
 
    background-color: blue; 
 
    display: none; 
 
    position: absolute; 
 
    right: 0; 
 
    z-index: 10; 
 
    overflow: hidden; 
 
} 
 

 
.list { 
 
    position: absolute; 
 
    z-index: 20; 
 
} 
 

 
.hidden { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="parent"> 
 
    <button onclick="toggleDropdown()">Toggle dropdown</button> 
 
    
 
    <div class="dropdown"> 
 
    First Dropdown 
 
    
 
    <button onclick="toggleList()">Toggle list</button> 
 
    <ul class="list"> 
 
     <li>1st element</li> 
 
     <li class="hidden">2nd element</li> 
 
     <li class="hidden">3rd element</li> 
 
     <li class="hidden">4th element</li> 
 
     <li class="hidden">5th element</li> 
 
     <li class="hidden">6th element</li> 
 
    </ul> 
 
    </div> 
 
</div>

Кто-то знает, как помочь в этом? Спасибо!

Answer 1

Удалить overflow: hidden от .dropdown и туда вы идете!

var dropdown = false; 
 
var list = false; 
 

 
function toggleList() { 
 
    toggle('.hidden', list); 
 
    list = !list; 
 
} 
 

 
function toggleDropdown() { 
 
    toggle('.dropdown', dropdown); 
 
    dropdown = !dropdown; 
 
} 
 

 
function toggle (selector, isAlreadyOpened) { 
 
    if(isAlreadyOpened) $(selector).hide(); 
 
    else $(selector).show(); 
 
}

.parent { 
 
    position: relative; 
 
    background-color: red; 
 
    width: 50%; 
 
} 
 

 
.dropdown { 
 
    width: 40%; 
 
    height: 100px; 
 
    background-color: blue; 
 
    display: none; 
 
    position: absolute; 
 
    right: 0; 
 
    z-index: 10; 
 
} 
 

 
.list { 
 
    position: absolute; 
 
    z-index: 20; 
 
} 
 

 
.hidden { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="parent"> 
 
    <button onclick="toggleDropdown()">Toggle dropdown</button> 
 
    
 
    <div class="dropdown"> 
 
    First Dropdown 
 
    
 
    <button onclick="toggleList()">Toggle list</button> 
 
    <ul class="list"> 
 
     <li>1st element</li> 
 
     <li class="hidden">2nd element</li> 
 
     <li class="hidden">3rd element</li> 
 
     <li class="hidden">4th element</li> 
 
     <li class="hidden">5th element</li> 
 
     <li class="hidden">6th element</li> 
 
    </ul> 
 
    </div> 
 
</div>

Answer 2

Ну, я действительно чувствую себя немного глупым. Я вернулся к своему коду, и я заметил overflow: hidden на элементе .dropdown. Я удалил его, и он исправил проблему.