[英]HTML + CSS drop down menu
Trying to practice making a slide down menu with html and css. 尝试练习使用html和css制作下拉菜单。
My only issue is with how the list items overlaps with the menu option. 我唯一的问题是列表项如何与菜单选项重叠。
How do i get the menu to slide behind the menu option? 我如何使菜单在菜单选项后面滑动?
HTML 的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 的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;
}
Thanks in advance! 提前致谢!
Try Z Index. 尝试Z索引。 Give z-index:1 to menu and z-index:-1 to ul 将z-index:1赋予菜单,将z-index:-1赋予ul
[Link][1]
[1]: https://jsfiddle.net/Le8jv91j/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.