Выпадающее меню HTML + CSS

Question

Пытается практиковать создание слайд-меню с помощью html и css.

Моя единственная проблема заключается в том, как элементы списка перекрываются с опцией меню.

Как получить меню для перехода по меню?

HTML

<div class="container"> 
    <p>Text</p> 
    <div class="menu"> 
    <ul> 
     <li>Menu 1</li> 
     <li>Menu 2</li> 
     <li>Menu 3</li> 
    </ul> 
    </div> 
</div> 

CSS

.container { 
    width: 30px; 
    height: 20px; 
    background-color: red; 
} 

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

.menu { 
    height: 0; 
    visibility: hidden; 
    top: -50px; 
    position: absolute; 
    transition: all .5s ease; 
} 

.container:hover .menu { 
    visibility: visible; 
    top: 20px; 
} 

.container .menu ul li { 
    border: 1px solid black; 
    width: 50px; 
} 

Заранее спасибо!

Answer 1

Попробуйте индекс Z. Дайте Z-индекс: 1 по меню и Z-индекс: от -1 до Ul

[Link][1] 


    [1]: https://jsfiddle.net/Le8jv91j/ 

Answer 2

Как уже упоминалось, использование Z-индекс -1. Codepen

.menu { 
    height: 0; 
    visibility: hidden; 
    top: -50px; 
    position: absolute; 
    transition: all .5s ease; 
    z-index: -1; 
}