CSS 纯CSS多级下拉菜单

在本文中，我们将介绍如何通过纯CSS实现多级下拉菜单。下拉菜单是网页设计中常见的交互元素之一，可以方便用户浏览和选择网站的不同功能或导航链接。

阅读更多：CSS 教程

实现基础的下拉菜单

要实现一个基础的下拉菜单，我们可以使用HTML和CSS的组合。首先，我们需要创建一个HTML结构，包含下拉菜单的列表。例如，我们可以创建一个带有3个主菜单项的菜单，每个主菜单项下面有2-3个子菜单项。

<ul class="menu">
  <li><a href="#">主菜单1</a></li>
  <li><a href="#">主菜单2</a>
    <ul class="sub-menu">
      <li><a href="#">子菜单1</a></li>
      <li><a href="#">子菜单2</a></li>
    </ul>
  </li>
  <li><a href="#">主菜单3</a>
    <ul class="sub-menu">
      <li><a href="#">子菜单1</a></li>
      <li><a href="#">子菜单2</a></li>
      <li><a href="#">子菜单3</a></li>
    </ul>
  </li>
</ul>

接下来，我们需要使用CSS样式来定义菜单的外观和行为。我们可以使用伪类选择器:hover来实现当鼠标悬停在主菜单项上时显示子菜单。同时，我们还可以使用position属性来控制子菜单的位置。

.menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu li {
  display: inline-block;
  position: relative;
}

.menu li a {
  display: block;
  padding: 10px;
  background-color: #eee;
  text-decoration: none;
  color: #333;
}

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

.sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #eee;
  padding: 0;
  margin: 0;
}

.sub-menu li {
  display: block;
}

以上代码将创建一个简单的下拉菜单。当鼠标悬停在主菜单项上时，子菜单会显示出来。请注意使用>符号来选择直接子级的元素（标签），以实现多级菜单。

实现多级下拉菜单

上面的示例中，我们只实现了一个级别的下拉菜单，但我们也可以通过类似的方式来实现多级下拉菜单。具体做法是，在子菜单中添加更多的子菜单。

例如，我们可以在第一个子菜单项中添加一个二级子菜单。修改HTML如下：

<ul class="menu">
  <li><a href="#">主菜单1</a></li>
  <li><a href="#">主菜单2</a>
    <ul class="sub-menu">
      <li><a href="#">子菜单1</a>
        <ul class="sub-menu">
          <li><a href="#">二级子菜单1</a></li>
          <li><a href="#">二级子菜单2</a></li>
        </ul>
      </li>
      <li><a href="#">子菜单2</a></li>
    </ul>
  </li>
  <li><a href="#">主菜单3</a>
    <ul class="sub-menu">
      <li><a href="#">子菜单1</a></li>
      <li><a href="#">子菜单2</a></li>
      <li><a href="#">子菜单3</a></li>
    </ul>
  </li>
</ul>

此时，我们需要修改CSS样式来适应多级菜单的显示和隐藏。我们可以使用相对定位和负值的top属性来实现多级子菜单的显示位置。同时，我们还需要使用display: none来隐藏多级子菜单。

.menu li:hover > .sub-menu {
  display: block;
  position: absolute;
  top: 0;
  left: 100%;
}

.sub-menu .sub-menu {
  display: none;
  position: absolute;
  top: 0;
  left: 100%;
}

通过以上代码，我们可以实现多级下拉菜单。当鼠标悬停在主菜单项上时，子菜单会显示出来，当鼠标悬停在子菜单项上时，二级子菜单会显示出来。