鼠标悬停实现二级菜单的显现

实现鼠标悬停二级菜单显现的方法有很多种，这里提供一种基于CSS的实现方法。

HTML代码：

<ul class="menu">
  <li><a href="#">一级菜单1</a>
    <ul>
      <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>
      <li><a href="#">二级菜单4</a></li>
      <li><a href="#">二级菜单5</a></li>
    </ul>
  </li>
  <li><a href="#">一级菜单3</a></li>
</ul>

CSS代码：

.menu li {
  position: relative; /* 设置li元素为相对定位 */
  list-style: none; /* 取消默认列表样式 */
}

.menu ul {
  position: absolute; /* 设置二级菜单为绝对定位 */
  top: 100%; /* 二级菜单的顶部对齐一级菜单的底部 */
  left: 0; /* 二级菜单的左边缘对齐一级菜单的左边缘 */
  display: none; /* 初始状态下二级菜单不显示 */
}

.menu li:hover ul {
  display: block; /* 鼠标悬停一级菜单时，显示二级菜单 */
}

.menu a {
  display: block; /* 将a元素转换为块级元素，使其可占满li元素的宽度 */
  padding: 10px; /* 添加内边距 */
}

.menu ul li {
  width: 200px; /* 设置二级菜单的宽度 */
}

这个实现方法的关键在于使用绝对定位将二级菜单定位到一级菜单下方，并使用鼠标悬停事件控制二级菜单的显示和隐藏。你可以根据需要调整样式细节，比如菜单的颜色、字体等。