dropdown css
时间: 2023-08-28 18:16:19 浏览: 109
CSS下拉菜单
下拉菜单的 CSS 样式可以使用以下代码进行设置:
HTML 结构:
```html
<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>
```
CSS 样式:
```css
.dropdown {
position: relative;
display: inline-block;
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 10px;
font-size: 16px;
border: none;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-content {
display: block;
}
```
这段代码创建了一个带有下拉菜单的按钮。当鼠标悬停在按钮上时,下拉菜单会显示出来。你可以根据需要进行修改和自定义样式。
阅读全文