当前位置：首页 > CSS

css制作下拉导航条

2026-01-08 18:05:37CSS

使用纯CSS制作下拉导航条

HTML结构部分需要包含导航主菜单和子菜单项，通常使用嵌套的无序列表（<ul>和<li>）实现：

<nav class="dropdown-menu">
  <ul>
    <li><a href="#">首页</a></li>
    <li>
      <a href="#">产品</a>
      <ul class="submenu">
        <li><a href="#">产品A</a></li>
        <li><a href="#">产品B</a></li>
      </ul>
    </li>
    <li>
      <a href="#">服务</a>
      <ul class="submenu">
        <li><a href="#">服务A</a></li>
        <li><a href="#">服务B</a></li>
      </ul>
    </li>
  </ul>
</nav>

CSS样式设计

基础导航样式设置水平菜单，隐藏子菜单并通过悬停触发显示：

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

.dropdown-menu li {
  position: relative;
}

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

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

.dropdown-menu li:hover > .submenu {
  display: block;
}

添加过渡动画效果

为下拉动作添加平滑过渡效果：

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

.dropdown-menu li:hover > .submenu {
  opacity: 1;
  visibility: visible;
}

多级下拉菜单支持

如需支持多级下拉菜单，调整子菜单位置和显示逻辑：

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

.dropdown-menu li {
  position: relative;
}

.dropdown-menu li:hover > .submenu {
  display: block;
}

响应式设计适配

针对移动设备添加媒体查询调整布局：

css制作下拉导航条

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

  .dropdown-menu .submenu {
    position: static;
    display: none;
  }

  .dropdown-menu li:hover > .submenu {
    display: none;
  }

  .dropdown-menu li.active > .submenu {
    display: block;
  }
}