css制作下拉导航

基础HTML结构

使用无序列表<ul>和<li>构建导航层级，下拉部分嵌套在<li>中：

<nav>
  <ul class="menu">
    <li><a href="#">首页</a></li>
    <li class="dropdown">
      <a href="#">产品</a>
      <ul class="submenu">
        <li><a href="#">网页设计</a></li>
        <li><a href="#">移动应用</a></li>
      </ul>
    </li>
  </ul>
</nav>

核心CSS样式

通过绝对定位和显示控制实现下拉效果：

.menu {
  display: flex;
  list-style: none;
  position: relative;
}
.dropdown {
  position: relative;
}
.submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #333;
  min-width: 160px;
}
.dropdown:hover .submenu {
  display: block;
}

过渡动画增强

添加平滑的出现效果：

.submenu {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s, transform 0.3s;
}
.dropdown:hover .submenu {
  opacity: 1;
  transform: translateY(0);
}

响应式适配

针对移动设备调整交互方式：

@media (max-width: 768px) {
  .menu {
    flex-direction: column;
  }
  .submenu {
    position: static;
    display: none;
  }
}

无障碍优化

确保键盘可操作：

.dropdown:focus-within .submenu {
  display: block;
  opacity: 1;
}
a:focus {
  outline: 2px solid #fff;
}

视觉美化建议

• 添加padding: 12px 16px调整菜单项间距
• 设置box-shadow: 0 8px 16px rgba(0,0,0,0.1)增强层次感
• 使用z-index确保下拉菜单覆盖其他元素