使用纯css3实现鼠标经过时显示子菜单，离开时隐藏

要使用纯CSS3实现鼠标经过时显示子菜单，离开时隐藏，你可以利用CSS的:hover伪类。下面是一个简单的示例，展示如何实现这个功能：

HTML结构：

<ul class="menu">
  <li>
    菜单项 1
    <ul class="submenu">
      <li>子菜单项 1.1</li>
      <li>子菜单项 1.2</li>
      <li>子菜单项 1.3</li>
    </ul>
  </li>
  <li>
    菜单项 2
    <ul class="submenu">
      <li>子菜单项 2.1</li>
      <li>子菜单项 2.2</li>
      <li>子菜单项 2.3</li>
    </ul>
  </li>
</ul>

CSS样式：

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

.menu li {
  position: relative; /* 为子菜单设置相对定位 */
  display: inline-block; /* 使菜单项水平排列 */
  margin-right: 10px; /* 添加一些间距 */
  padding: 5px;
  background-color: #f0f0f0; /* 添加背景色 */
  cursor: pointer; /* 设置鼠标指针样式 */
}

.submenu {
  display: none; /* 默认隐藏子菜单 */
  position: absolute; /* 绝对定位子菜单 */
  top: 100%; /* 使子菜单位于父菜单项下方 */
  left: 0; /* 对齐父菜单项左侧 */
  padding: 0; /* 移除默认内边距 */
  background-color: #fff; /* 添加背景色 */
  border: 1px solid #ccc; /* 添加边框 */
}

.submenu li {
  display: block; /* 使子菜单项垂直排列 */
  margin: 0; /* 移除外边距 */
  padding: 5px; /* 添加内边距 */
}

.menu li:hover .submenu {
  display: block; /* 鼠标经过时显示子菜单 */
}

在这个示例中，.submenu默认是隐藏的（display: none;）。当鼠标经过.menu li时，.submenu的display属性被设置为block，从而显示子菜单。当鼠标离开时，子菜单会自动隐藏，因为CSS的:hover伪类只在鼠标经过时应用样式。