css实现多级折叠菜单效果

CSS实现多级折叠菜单效果非常常见，可以让网页看起来更加整洁，同时也方便用户快速找到需要的内容。

下面介绍实现多级折叠菜单效果的方法：

<ul class="level-one">
  <li>一级菜单1
    <ul class="level-two">
      <li>二级菜单1.1
        <ul class="level-three">
          <li>三级菜单1.1.1</li>
          <li>三级菜单1.1.2</li>
        </ul>
      </li>
      <li>二级菜单1.2</li>
    </ul>
  </li>
  <li>一级菜单2</li>
</ul>

首先，我们需要使用<ul>和<li>标签来构建菜单结构。一般情况下，一级菜单使用class为level-one，二级菜单使用class为level-two，三级菜单使用class为level-three。

接下来，我们需要使用CSS样式来实现折叠效果：

.level-two,.level-three {
  display: none;
}
.level-one li:hover > ul {
  display: block;
}

在上面的CSS样式中，我们将二级菜单和三级菜单默认设置为display: none，表示默认情况下不显示。

然后，我们使用了:hover伪类来实现鼠标悬停时显示菜单的效果。具体地，当鼠标悬停在一级菜单上时，我们通过level-one li:hover选择器选中了这个一级菜单，然后使用>选择器选中它的子级菜单，最后将显示设置为block即可。

以上就是实现多级折叠菜单效果的方法，通过使用CSS样式实现，非常简单易懂，可以让你快速地给网页添加菜单效果。