纯css制作下拉菜单

纯CSS下拉菜单实现方法

通过CSS的:hover伪类和display属性可以实现纯CSS下拉菜单，无需JavaScript。以下是具体实现方式：

HTML结构示例：

<nav class="dropdown">
  <ul>
    <li><a href="#">主菜单1</a>
      <ul class="submenu">
        <li><a href="#">子菜单1</a></li>
        <li><a href="#">子菜单2</a></li>
      </ul>
    </li>
    <li><a href="#">主菜单2</a>
      <ul class="submenu">
        <li><a href="#">子菜单3</a></li>
        <li><a href="#">子菜单4</a></li>
      </ul>
    </li>
  </ul>
</nav>

CSS样式代码：

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

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

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

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

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

.dropdown .submenu li {
  display: block;
}

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

关键实现原理

利用CSS的position: absolute将子菜单定位到父菜单下方。默认状态下子菜单display: none隐藏，当鼠标悬停在父菜单项时，通过:hover伪类显示子菜单。

添加过渡动画效果

可以通过CSS过渡属性让下拉更平滑：

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

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

多级下拉菜单实现

HTML结构扩展：

<li><a href="#">多级菜单</a>
  <ul class="submenu">
    <li><a href="#">二级菜单</a>
      <ul class="submenu">
        <li><a href="#">三级菜单</a></li>
      </ul>
    </li>
  </ul>
</li>

CSS调整：

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

响应式设计考虑

在移动设备上可能需要调整：

@media (max-width: 768px) {
  .dropdown > ul > li {
    display: block;
  }

  .submenu {
    position: static;
  }
}