纯CSS实现圆角折叠菜单的方法

关于纯CSS实现圆角折叠菜单，我可以提供以下攻略：

步骤一：HTML结构

首先，我们需要准备一个基本的HTML结构，包含菜单的外层容器和内部的菜单项列表。例如：

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

步骤二：CSS样式

接下来，我们需要设置一些基本的CSS样式，包括菜单的位置、宽度、高度、背景颜色等。例如：

.menu {
  position: relative;
  width: 200px;
  height: 150px;
  background-color: #f2f2f2;
  overflow: hidden;
}

步骤三：添加伸缩元素

下一步，我们需要使用CSS3中的伸缩元素来实现菜单的折叠效果。具体地，在菜单的内部列表设置一个伸缩元素，并给这个元素设置圆角样式。例如：

.menu ul {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu li {
  border-top: 1px solid #ccc;
}

.menu li:first-child {
  border-top: none;
}

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

.menu ul li:last-child {
  border-bottom: 1px solid #ccc;
}

.menu ul li:last-child a {
  border-radius: 0 0 10px 10px;
  -webkit-border-radius: 0 0 10px 10px;
  -moz-border-radius: 0 0 10px 10px;
}

步骤四：添加鼠标事件

最后，我们需要添加鼠标事件来实现菜单的展开和折叠。具体地，在菜单容器上绑定两个事件，一个是当鼠标进入容器时展开菜单，另一个是当鼠标离开容器时折叠菜单。例如：

.menu:hover ul {
  height: 100%;
}

.menu ul {
  height: 0;
  transition: height 0.3s ease-in-out;
}

以上就是完整的“纯CSS实现圆角折叠菜单的方法”的攻略了。

下面是两个示例说明：

示例1

在这个示例中，我们实现了一个竖向的圆角折叠菜单。查看示例。

示例2

这个示例中，我们实现了一个横向的圆角折叠菜单。查看示例。