css鼠标悬浮显示二级菜单,CSS3 悬停时自动滑出的二级菜单

你可以使用CSS的:hover伪类和CSS3的transition属性来实现鼠标悬浮显示二级菜单，并且悬停时自动滑出的效果。以下是一个例子：

HTML代码：

<ul class="menu">
  <li>一级菜单1
    <ul class="submenu">
      <li>二级菜单1</li>
      <li>二级菜单2</li>
      <li>二级菜单3</li>
    </ul>
  </li>
  <li>一级菜单2
    <ul class="submenu">
      <li>二级菜单1</li>
      <li>二级菜单2</li>
    </ul>
  </li>
  <li>一级菜单3</li>
</ul>

CSS代码：

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

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

.menu li:hover .submenu {
  opacity: 1;
  visibility: visible;
  top: 100%;
}

.submenu {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  background-color: #fff;
  padding: 10px;
  transition: all 0.3s ease-in-out;
}

.submenu li {
  display: block;
}

解释：

首先，我们定义了一个包含一级菜单和二级菜单的HTML列表，并使用了CSS的list-style、margin和padding属性来去掉默认样式和间距。

然后，我们给每个一级菜单项添加了一个position:relative属性，这是因为我们希望二级菜单在一级菜单的下方显示，并且需要相对于一级菜单定位。

接着，我们使用了CSS的:hover伪类来控制二级菜单在鼠标悬浮时的样式。当鼠标悬停在一级菜单上时，我们给它的子元素.submenu添加了opacity、visibility和top属性，使它们从不可见到可见，并下滑出来。

最后，我们定义了.submenu的样式，包括position、top、left、opacity、visibility、background-color、padding和transition属性。我们还给每个二级菜单项添加了display:block属性，让它们竖向排列。

这样，当鼠标悬停在一级菜单上时，对应的二级菜单就会自动滑出来了。