CSS 下拉菜单

学习用纯CSS创建下拉菜单 · 难度：进阶 · +15XP

CSS 下拉菜单制作指南

下拉菜单是网页中最常见的交互组件之一。纯 CSS 实现的下拉菜单无需 JavaScript，通过 hover 或 focus 触发，具有性能好、代码简洁的优点。

基础下拉菜单结构

<div class="dropdown">
  <button class="dropdown-btn">菜单</button>
  <div class="dropdown-content">
    <a href="#">选项一</a>
    <a href="#">选项二</a>
    <a href="#">选项三</a>
  </div>
</div>

/* 容器 */
.dropdown {
  position: relative;
  display: inline-block;
}
/* 下拉内容 — 默认隐藏 */
.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 180px;
  background: white;
  box-shadow: 0 8px 16px rgba(0,0,0,0.15);
  border-radius: 6px;
  z-index: 100;
  overflow: hidden;
}
/* hover 时显示 */
.dropdown:hover .dropdown-content {
  display: block;
}
/* 菜单项样式 */
.dropdown-content a {
  display: block;
  padding: 12px 16px;
  color: #333;
  text-decoration: none;
  transition: background 0.2s;
}
.dropdown-content a:hover {
  background: #f5f5f5;
}

带动画的下拉菜单

使用 opacity 和 transform 替代 display：

.dropdown-content {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 200px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.15);
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
}
.dropdown:hover .dropdown-content {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

多级下拉菜单

.nested-dropdown {
  position: relative;
}
.nested-dropdown .dropdown-content {
  top: 0;
  left: 100%;
  margin-left: 4px;
}
.nested-dropdown:hover > .dropdown-content {
  opacity: 1;
  visibility: visible;
}

无障碍下拉菜单

使用 :focus-within 支持键盘导航：

.dropdown:focus-within .dropdown-content {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.dropdown-content a:focus {
  background: #f0f0f0;
  outline: none;
}

Mega Menu（大型下拉）

.mega-menu .dropdown-content {
  left: 0;
  right: 0;
  min-width: 600px;
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.mega-menu .dropdown-content h4 {
  color: #333;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid #eee;
}

下拉菜单的三角箭头

.dropdown-content::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 20px;
  width: 0; height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid white;
  filter: drop-shadow(0 -2px 2px rgba(0,0,0,0.1));
}

注意事项

1. 使用 position: relative 的容器包裹，确保下拉内容相对于触发元素定位
2. 给下拉内容设置 z-index 确保不被遮挡
3. 使用 visibility 配合 opacity 做动画，而不是 display
4. 考虑移动端触摸交互（可使用 checkbox hack 或 JS 辅助）
5. 添加 hover 和 focus 状态以确保键盘可访问

纯 CSS 下拉菜单简单高效，适合大多数导航场景。对于复杂的交互需求（如点击触发、延迟关闭），可以结合少量 JavaScript 增强体验。