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; 
}