[分享]css做三级下拉菜单

CSS是一种用来描述网页外观的语言，它可以通过一系列样式规则来控制网页元素的显示效果。其中，三级下拉菜单是一种比较常见的网页导航方式，本文将介绍如何使用CSS来实现三级下拉菜单。首先，我们需要定义一个...

CSS是一种用来描述网页外观的语言，它可以通过一系列样式规则来控制网页元素的显示效果。其中，三级下拉菜单是一种比较常见的网页导航方式，本文将介绍如何使用CSS来实现三级下拉菜单。

首先，我们需要定义一个基本的HTML结构，包括一个一级菜单和多个二级菜单，每个二级菜单下又有多个三级菜单。代码如下：

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

然后，我们可以使用CSS来给菜单添加样式。首先，我们需要定义一些基本样式，比如去掉默认的列表样式和超链接下划线：

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

.menu a {
  text-decoration: none;
} 

接着，我们需要给二级和三级菜单添加样式，使它们隐藏起来。我们可以使用CSS选择器“>”来选中直接子元素，然后使用display属性将它们隐藏：

.menu ul {
  display: none;
}

.menu li:hover > ul {
  display: block;
} 

最后，我们需要给三级菜单添加样式，使它们显示在二级菜单的下方。我们可以使用position和top属性来实现这个效果：

.menu ul ul {
  position: absolute;
  top: 0;
}

.menu ul ul ul {
  top: 0;
  left: 100%;
} 

以上就是使用CSS实现三级下拉菜单的全部代码。通过添加一些颜色和边框样式，我们可以美化菜单的外观，使它看起来更加漂亮和易于使用。