css制作下拉导航

使用纯CSS创建下拉导航

HTML结构需包含嵌套列表，主菜单项包含子菜单：

<nav class="dropdown">
  <ul>
    <li><a href="#">首页</a></li>
    <li class="has-submenu">
      <a href="#">产品</a>
      <ul class="submenu">
        <li><a href="#">产品A</a></li>
        <li><a href="#">产品B</a></li>
      </ul>
    </li>
    <li><a href="#">联系</a></li>
  </ul>
</nav>

基础CSS样式设置导航栏水平排列：

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

.dropdown li {
  position: relative;
}

.dropdown a {
  display: block;
  padding: 12px 20px;
  color: white;
  text-decoration: none;
}

实现下拉功能的关键CSS

隐藏子菜单并设置悬停显示效果：

.submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #444;
  min-width: 160px;
}

.has-submenu:hover .submenu {
  display: block;
}

添加过渡动画效果

平滑显示下拉菜单：

.submenu {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

.has-submenu:hover .submenu {
  opacity: 1;
  visibility: visible;
}

响应式设计适配

移动端适配方案：

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

  .submenu {
    position: static;
    display: none;
    padding-left: 20px;
  }
}

增强视觉体验

添加指示图标和悬停效果：

.has-submenu::after {
  content: "▼";
  margin-left: 5px;
  font-size: 0.6em;
}

.dropdown a:hover {
  background: #555;
}

.submenu li {
  border-bottom: 1px solid #666;
}