用css制作下拉菜单

使用CSS制作下拉菜单

HTML结构

创建一个基本的下拉菜单需要嵌套的HTML结构。通常使用<ul>和<li>标签实现导航菜单，下拉部分嵌套在主菜单项中。

<nav>
  <ul class="menu">
    <li><a href="#">首页</a></li>
    <li class="dropdown">
      <a href="#">产品</a>
      <ul class="dropdown-content">
        <li><a href="#">产品A</a></li>
        <li><a href="#">产品B</a></li>
      </ul>
    </li>
    <li><a href="#">关于</a></li>
  </ul>
</nav>

CSS样式

通过CSS控制下拉菜单的显示和隐藏，并添加悬停效果。

.menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  background-color: #333;
}

.menu li {
  position: relative;
}

.menu li a {
  display: block;
  padding: 15px 20px;
  color: white;
  text-decoration: none;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #444;
  min-width: 160px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown-content li a:hover {
  background-color: #555;
}

动画效果（可选）

为下拉菜单添加平滑的动画效果，可以使用CSS过渡或关键帧动画。

.dropdown-content {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

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

响应式适配

针对移动设备调整下拉菜单的样式，通常改为垂直布局或使用汉堡菜单。

@media (max-width: 768px) {
  .menu {
    flex-direction: column;
  }

  .dropdown-content {
    position: static;
    width: 100%;
  }
}

无障碍优化

确保下拉菜单对键盘导航和屏幕阅读器友好。

.menu li:focus-within .dropdown-content,
.menu li:hover .dropdown-content {
  display: block;
}

.dropdown-content li a:focus {
  outline: 2px solid white;
}