下拉菜单
纯 CSS 下拉菜单、hover 展开、嵌套子菜单
下拉菜单
纯 CSS 实现下拉菜单——只需 :hover 和定位组合。
学完本章你将： 掌握 hover 下拉、嵌套子菜单。
基本下拉
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
.dropdown { position: relative; display: inline-block; }
.dropdown-content {
display: none;
position: absolute;
background: #fff;
min-width: 160px;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
z-index: 10;
}
.dropdown-content a {
display: block;
padding: 10px 15px;
text-decoration: none;
color: #333;
}
.dropdown-content a:hover { background: #f0f0f0; }
.dropdown:hover .dropdown-content { display: block; }嵌套子菜单
css
.sub-dropdown { position: relative; }
.sub-dropdown-content {
display: none;
position: absolute;
left: 100%;
top: 0;
}
.sub-dropdown:hover .sub-dropdown-content { display: block; }