用纯CSS做下拉菜单，本质是利用嵌套列表和:hover伪类切换子菜单的显示状态。我们只需要准备一级导航和隐藏的二级菜单，在鼠标悬停时让二级菜单变为可见即可。
一、HTML结构
下拉菜单通常使用无序列表嵌套来实现。外层li放一级项，里面再放一个ul作为下拉内容。
<nav class="menu">
<ul>
<li><a href="#">首页</a></li>
<li class="has-child">
<a href="#">产品</a>
<ul class="submenu">
<li><a href="#">Web应用</a></li>
<li><a href="#">移动应用</a></li>
</ul>
</li>
<li><a href="#">关于</a></li>
</ul>
</nav>
二、CSS样式
关键点是将二级菜单默认隐藏，当鼠标移到父级li时再显示出来。
.menu ul {
list-style: none;
margin: 0;
padding: 0;
}
.menu > ul > li {
display: inline-block;
position: relative;
}
.menu a {
display: block;
padding: 10px 15px;
text-decoration: none;
color: #333;
}
.submenu {
display: none;
position: absolute;
top: 100%;
left: 0;
background: #fff;
border: 1px solid #ddd;
min-width: 120px;
}
.has-child:hover .submenu {
display: block;
}
.submenu li a:hover {
background: #f2f2f2;
}
三、注意事项
1. 父级需要定位
二级菜单使用position:absolute，其父级li必须设置position:relative，否则子菜单会相对页面定位而错位。
2. 避免鼠标移开间隙
如果一级菜单和二级菜单之间有空隙，鼠标移动时下拉会消失。可让.submenu的top与父级高度贴合，或用padding撑开而非margin。
3. 移动端兼容
手机没有hover状态，纯CSS下拉可配合checkbox或:focus实现点击展开，但最简单仍是小屏时改为平铺展示。
四、小结
css下拉菜单怎么做这个问题，答案就是嵌套ul、默认隐藏子菜单、用:hover显示。掌握这套结构后，调整样式就能做出导航条、分类筛选等多种交互组件。