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-index：1到菜單和z-index：-1到ul

[Link][1] 


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

Answer 2

如上所述，使用-1的z-索引。 Codepen

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