答案：使用CSS的:hover伪类控制子菜单显示，通过HTML无序列表构建结构，设置position定位子菜单，默认用display:none隐藏，悬停时显示。可添加opacity过渡提升视觉效果，注意父级相对定位及兼容性问题。
使用CSS制作简单的下拉菜单，可以通过 :hover 伪类结合HTML结构来实现，无需JavaScript。核心思路是当鼠标悬停在父级菜单项上时，显示其隐藏的子菜单。下面是一个清晰、实用的实现方法。
1. 基本HTML结构
下拉菜单通常使用无序列表 <ul> 和列表项 <li> 构建，结构清晰且语义化。
<ul class="menu">
<li><a href="#">首页</a></li>
<li class="dropdown">
<a href="#">产品</a>
<ul class="submenu">
<li><a href="#">产品一</a></li>
<li><a href="#">产品二</a></li>
<li><a href="#">产品三</a></li>
</ul>
</li>
<li><a href="#">关于</a></li>
</ul>
2. 使用CSS隐藏和显示子菜单
默认隐藏子菜单，利用 :hover 控制显示状态。
.menu {
list-style: none;
padding: 0;
margin: 0;
background: #333;
}
<p>.menu > li {
display: inline-block;
position: relative;
}</p><p>.menu a {
display: block;
padding: 10px 15px;
color: white;
text-decoration: none;
}</p><p>/<em> 隐藏子菜单 </em>/
.submenu {
list-style: none;
padding: 0;
margin: 0;
position: absolute;
top: 100%;
left: 0;
background: #444;
width: 150px;
display: none; /<em> 默认隐藏 </em>/
}</p><p>.submenu li {
text-align: left;
}</p><p>.submenu a {
padding: 10px;
}</p><p>/<em> 悬停时显示子菜单 </em>/
.dropdown:hover .submenu {
display: block; /<em> 显示下拉菜单 </em>/
}
3. 可选优化：添加过渡效果
让下拉更自然，可使用 opacity 和 visibility 结合 transition。
立即学习“前端免费学习笔记（深入）”；
.submenu {
/* 替换 display: none/block */
opacity: 0;
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
background: #444;
width: 150px;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
<p>.dropdown:hover .submenu {
opacity: 1;
visibility: visible;
}
这样能实现淡入淡出效果，视觉体验更好。
4. 注意事项与兼容性
- 确保父级 li 设置 position: relative，以便子菜单定位准确
- 移动端不支持 hover，此方案适合桌面端；移动端建议用点击事件或媒体查询调整
- 避免过度嵌套，保持结构简洁
- 可添加 :focus-within 提升键盘可访问性
基本上就这些。通过 :hover 和伪类控制显示隐藏，配合简单结构，就能实现干净高效的下拉菜单。不复杂但容易忽略细节，比如定位和隐藏方式的选择。
