CSS 下拉菜单
下面是关于 CSS 下拉菜单（Dropdown Menu） 的完整中文讲解，包括原理、结构、常用样式和响应式建议，不使用 JavaScript 也能实现基本的交互效果。
✅ 一、下拉菜单的基本原理
利用 HTML 嵌套结构 + CSS 的 :hover 伪类 控制子菜单的显示与隐藏：
- 默认：子菜单隐藏
- 鼠标悬停父级菜单项时：显示子菜单
🧱 二、基本 HTML 结构
<nav class="navbar">
<ul class="nav">
<li><a href="#">首页</a></li>
<li class="dropdown">
<a href="#">服务</a>
<ul class="dropdown-menu">
<li><a href="#">网页设计</a></li>
<li><a href="#">前端开发</a></li>
<li><a href="#">SEO优化</a></li>
</ul>
</li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
🎨 三、CSS 样式（横向菜单 + 下拉）
/* 顶部导航栏 */
.nav {
list-style: none;
margin: 0;
padding: 0;
display: flex;
background: #333;
}
.nav > li {
position: relative; /* 让子菜单定位基于它 */
}
.nav > li > a {
display: block;
padding: 12px 20px;
color: white;
text-decoration: none;
}
.nav > li > a:hover {
background: #444;
}
/* 下拉菜单 */
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
background: white;
list-style: none;
padding: 0;
margin: 0;
display: none; /* 默认隐藏 */
min-width: 160px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
z-index: 1000;
}
.dropdown-menu li a {
display: block;
padding: 10px 15px;
color: #333;
text-decoration: none;
}
.dropdown-menu li a:hover {
background: #f2f2f2;
}
/* 悬停时显示子菜单 */
.dropdown:hover .dropdown-menu {
display: block;
}
🧪 四、实际效果说明
- 鼠标悬停在 “服务” 上会显示下拉内容
- 子菜单定位使用
position: absolute - 菜单宽度、阴影、背景都可自定义
- 不需要 JavaScript
📱 五、响应式下拉菜单建议（移动端）
纯 CSS 下拉在移动端通常不友好，建议用以下方式改进：
- 使用点击事件控制菜单（需 JS）
- 在小屏幕用折叠菜单（汉堡按钮）
- 利用
<details>和<summary>标签实现无 JS 展开效果：
<details>
<summary>服务</summary>
<ul>
<li><a href="#">网页设计</a></li>
<li><a href="#">前端开发</a></li>
</ul>
</details>
🔄 六、多级下拉菜单（嵌套）
<li class="dropdown">
<a href="#">产品</a>
<ul class="dropdown-menu">
<li><a href="#">软件</a></li>
<li class="dropdown">
<a href="#">硬件</a>
<ul class="dropdown-menu">
<li><a href="#">笔记本</a></li>
<li><a href="#">显示器</a></li>
</ul>
</li>
</ul>
</li>
嵌套的 .dropdown-menu 可以设置 left: 100%，从右侧展开：
.dropdown-menu .dropdown {
position: relative;
}
.dropdown-menu .dropdown-menu {
top: 0;
left: 100%;
}
🔒 七、常见问题 & 注意事项
| 问题 | 解决方法 |
|---|---|
| 子菜单被遮挡 | 使用 z-index 提高层级 |
| 下拉菜单宽度不一致 | 设置 min-width |
| 子菜单点击跳转消失过快 | 移动端建议用点击控制，不使用 :hover |
| 多级菜单定位混乱 | 每层菜单的 position 要正确设置 |
| 兼容性 | 所有功能都可在现代浏览器良好支持 |
✨ 八、简易完整示例（可复制使用）
<nav class="navbar">
<ul class="nav">
<li><a href="#">首页</a></li>
<li class="dropdown">
<a href="#">服务</a>
<ul class="dropdown-menu">
<li><a href="#">设计</a></li>
<li><a href="#">开发</a></li>
<li><a href="#">推广</a></li>
</ul>
</li>
<li><a href="#">关于我们</a></li>
</ul>
</nav>
<style>
.navbar { background: #333; }
.nav {
list-style: none;
margin: 0; padding: 0;
display: flex;
}
.nav > li { position: relative; }
.nav a {
display: block;
padding: 12px 20px;
color: white;
text-decoration: none;
}
.nav a:hover { background: #444; }
.dropdown-menu {
display: none;
position: absolute;
background: white;
min-width: 160px;
top: 100%;
left: 0;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.dropdown-menu a {
color: #333;
padding: 10px 15px;
}
.dropdown:hover .dropdown-menu {
display: block;
}
</style>
如果你需要我帮你制作一个响应式可点击的下拉菜单，或者带图标/动画/多级菜单的高级版本，可以告诉我具体需求，我可以帮你生成完整的代码。