下拉菜单是网页设计中常用的组件,通常用于展示选项、导航链接等。而常规的下拉菜单是横向摆放的,那么如何实现竖向排列呢?本文将为大家介绍使用 CSS 实现竖向下拉菜单的方法。 首先,我们需要有一个 HTM
<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>
p {
margin: 0;
padding: 0;
}
<br>
.dropdown {
position: relative;
display: inline-block;
}
<br>
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 12px 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
<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;
left: 100%;
top: 0;
}
<br>
@media only screen and (max-width: 600px) {
.dropdown-content {
left: 0;
top: 100%;
}
}
粉丝
0
关注
0
收藏
0