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

你可以使用CSS3的:hover伪类来实现鼠标经过时显示子菜单，离开时隐藏。以下是一个简单的示例：

HTML 结构：

<div class="menu">
  <ul>
    <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="#">子菜单4</a></li>
        <li><a href="#">子菜单5</a></li>
        <li><a href="#">子菜单6</a></li>
      </ul>
    </li>
  </ul>
</div>

CSS 样式：

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

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

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

.submenu {
  position: absolute;
  top: 100%;
  left: 0;
  display: none; /* 默认隐藏子菜单 */
}

.submenu li {
  display: block; /* 子菜单项以块级元素显示 */
}

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

在上面的示例中，.submenu 类默认设置了 display: none; 来隐藏子菜单。当鼠标经过 .menu li 元素时，通过 .menu li:hover .submenu 选择器将子菜单的 display 属性设置为 block，从而显示子菜单。当鼠标离开时，子菜单会自动隐藏。