css三级菜单滑出显示

CSS三级菜单滑出显示在网站中非常常见，可以让页面看起来更加美观和专业。下面就来介绍如何实现这种效果。

HTML代码：
<div class="menu">
  <ul>
    <li><a href="#">一级菜单1</a>
      <ul>
        <li><a href="#">二级菜单1-1</a>
          <ul>
            <li><a href="#">三级菜单1-1-1</a></li>
            <li><a href="#">三级菜单1-1-2</a></li>
          </ul>
        </li>
        <li><a href="#">二级菜单1-2</a></li>
      </ul>
    </li>
    <li><a href="#">一级菜单2</a></li>
  </ul>
</div>

CSS代码：
.menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu ul li {
  float: left;
  position: relative;
}
.menu ul li a {
  display: block;
  width: 120px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background-color: #f0f0f0;
  color: #333;
  text-decoration: none;
}
.menu ul li:hover > ul {
  display: block;
}
.menu ul ul {
  display: none;
  position: absolute;
  top: 30px;
  left: 0;
}
.menu ul ul li a {
  width: 160px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background-color: #ccc;
}
.menu ul ul ul {
  top: 0;
  left: 160px;
} 

上面的HTML代码中，使用了三级嵌套的ul和li标签来实现菜单的层级结构。CSS代码中主要是设置菜单项的样式和一些基本的布局属性。其中，菜单项中的ul标签设置了position属性为absolute，top和left属性设置了菜单子项相对于父项的位置，display属性设置为none，这样菜单子项就默认是隐藏的。

通过CSS选择器.menu ul li:hover > ul，能够实现当鼠标移动到菜单项上时，对应的子项菜单就会显示出来。这里使用了“子项选择符”(>)，表示只选择直接的后代元素。

如果要实现更多级别的菜单，只需要按照相同的方式逐级嵌套ul和li标签，然后设置相应的CSS样式即可。