html下拉折叠菜单,纯CSS实现折叠菜单下拉菜单

好的，下拉折叠菜单的实现可以通过使用CSS的伪类:hover来实现。

HTML结构如下：

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

CSS样式如下：

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

.menu li {
  position: relative;
}

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

.menu .submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  padding: 0;
  margin: 0;
}

.menu li:hover .submenu {
  display: block;
}

.menu .submenu li {
  position: relative;
}

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

.menu .submenu .submenu {
  display: none;
  position: absolute;
  top: 0;
  left: 100%;
  padding: 0;
  margin: 0;
}

.menu .submenu li:hover .submenu {
  display: block;
}

解释一下CSS样式的实现：

- .menu类定义了整个菜单的样式，包括去掉默认列表样式、设置padding和margin；
- .menu li类定义了每个菜单项的样式，其中position属性设置成relative，是为了让后面的子菜单绝对定位时相对于它定位；
- .menu li a类定义了每个菜单项的链接样式；
- .menu .submenu类定义了子菜单的样式，其中display设置成none，是为了在一开始隐藏子菜单；
- .menu li:hover .submenu类定义了当鼠标移到菜单项上时，子菜单的显示样式，display设置成block，即显示出来；
- .menu .submenu li类定义了每个子菜单项的样式；
- .menu .submenu li a类定义了每个子菜单项的链接样式；
- .menu .submenu .submenu类定义了子菜单的子菜单样式，其中display设置成none，是为了在一开始隐藏子菜单的子菜单；
- .menu .submenu li:hover .submenu类定义了当鼠标移到子菜单项上时，子菜单的子菜单的显示样式，display设置成block，即显示出来。

以上就是一个纯CSS实现下拉折叠菜单的方法，希望能对你有所帮助。