用css制作下拉菜单

使用纯CSS制作下拉菜单

HTML结构

基础的下拉菜单需要嵌套的HTML结构，通常使用<ul>和<li>标签实现层级关系：

<div class="dropdown">
  <button class="dropdown-btn">菜单</button>
  <ul class="dropdown-content">
    <li><a href="#">选项1</a></li>
    <li><a href="#">选项2</a></li>
    <li><a href="#">选项3</a></li>
  </ul>
</div>

CSS样式

通过CSS控制下拉菜单的显示与隐藏：

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-btn {
  background: #3498db;
  color: white;
  padding: 10px 15px;
  border: none;
  cursor: pointer;
}

.dropdown-content {
  position: absolute;
  background: #f9f9f9;
  min-width: 160px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

.dropdown:hover .dropdown-content {
  opacity: 1;
  visibility: visible;
}

.dropdown-content li {
  padding: 12px 16px;
  border-bottom: 1px solid #ddd;
}

.dropdown-content li:hover {
  background: #f1f1f1;
}

关键实现技巧

定位方式

使用position: absolute使下拉内容脱离文档流，配合position: relative的父容器实现精确定位。

显示/隐藏控制

通过opacity和visibility属性实现平滑过渡效果，比直接使用display: none更适合动画效果。

悬停触发

利用:hover伪类实现鼠标悬停时显示菜单，无需JavaScript。

响应式适配

移动端优化

添加媒体查询适应小屏幕设备：

@media (max-width: 768px) {
  .dropdown-content {
    width: 100%;
    left: 0;
  }
}

无障碍支持

为按钮添加ARIA属性提升可访问性：

<button class="dropdown-btn" aria-haspopup="true" aria-expanded="false">
  菜单
</button>

进阶变体

多级嵌套菜单

通过CSS选择器实现多级菜单：

.dropdown-content .dropdown-content {
  left: 100%;
  top: 0;
}

点击触发替代方案

使用:focus-within实现点击触发效果：

.dropdown:focus-within .dropdown-content {
  opacity: 1;
  visibility: visible;
}