前端开发中,下拉菜单是常见的交互组件。今天我们来介绍一种利用 CSS 实现下拉菜单的方法,这个方法非常适合初学者练手。 本文参考了菜鸟教程中的示例,通过代码实现一个简单的下拉菜单。 首先,我们需要写一
<div class="dropdown">
<button class="dropbtn">菜单</button>
<div class="dropdown-content">
<a href="#">选项1</a>
<a href="#">选项2</a>
<a href="#">选项3</a>
</div>
</div>
.dropdown {
position: relative;
display: inline-block;
}
<br>
.dropdown-content {
display: none;
position: absolute;
z-index: 1;
}
<br>
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
<br>
.dropdown:hover .dropdown-content {
display: block;
}
粉丝
0
关注
0
收藏
0