[英]HTML + CSS drop down menu
尝试练习使用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;
}
提前致谢!
尝试Z索引。 将z-index:1赋予菜单,将z-index:-1赋予ul
[Link][1]
[1]: https://jsfiddle.net/Le8jv91j/
如前所述,请使用-1的z-index。 码笔
.menu {
height: 0;
visibility: hidden;
top: -50px;
position: absolute;
transition: all .5s ease;
z-index: -1;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.