使用 :hover 触发下拉菜单，结合媒体查询适配屏幕尺寸；2. 桌面端通过 display: none/block 控制子菜单显示；3. 移动端用 flex-direction 切换布局，优化触屏体验；4. 推荐 JavaScript 增强点击交互，提升兼容性。
在CSS中实现响应式导航菜单的下拉效果，可以通过 :hover 伪类触发子菜单显示，并结合 媒体查询（@media） 适配不同屏幕尺寸。尤其在移动端，可以将悬停改为点击行为或使用JavaScript增强交互，但纯CSS方案在桌面端简洁有效。
1. 基础HTML结构
构建一个包含主菜单和子菜单的导航结构：
2. 桌面端：使用 :hover 显示下拉菜单
在大屏幕上，鼠标悬停时显示子菜单：
.submenu {
display: none;
position: absolute;
background: #fff;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
list-style: none;
padding: 0;
margin: 0;
}
.dropdown:hover .submenu {
display: block;
}
.navbar ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
}
.navbar a {
display: block;
padding: 1rem;
text-decoration: none;
color: #333;
}
3. 响应式设计：使用媒体查询切换布局
当屏幕变小时，隐藏水平布局，改用垂直堆叠或汉堡菜单更合适。下面展示如何在小屏上隐藏悬停下拉，转为可点击展开（仍使用 :hover，适合触屏基本支持）：
立即学习“前端免费学习笔记（深入）”；
@media (max-width: 768px) {
.navbar ul {
flex-direction: column;
}
.dropdown > a::after {
content: " ▼";
font-size: 0.8em;
}
.submenu {
position: static; / 取消绝对定位 /
box-shadow: none;
background: #f4f4f4;
display: none; / 默认隐藏 /
}
.dropdown:hover .submenu {
display: block;
}
}
4. 移动端优化建议
虽然 :hover 在部分移动浏览器中可用，但体验不稳定。如需更好兼容性，可考虑以下方式：
- 添加JavaScript控制点击展开
- 使用 max-height + overflow 实现平滑动画
- 引入“汉堡按钮”配合隐藏/显示菜单
例如，用 max-height 制作展开动画：
.submenu {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.dropdown:hover .submenu {
max-height: 200px;
}
基本上就这些。通过 hover 控制显示、媒体查询调整布局，就能实现一个基础但实用的响应式下拉导航菜单。关键是结构清晰、样式分离、兼顾触屏体验。不复杂但容易忽略细节。
