css三级菜单怎么设置

CSS三级菜单是网站常见的一种导航方式，它不仅方便用户查看网站的各个页面，还能美化网站的界面。本文将介绍如何使用CSS设置一个简单的三级菜单。

首先，在HTML文件中创建菜单的结构，使用无序列表（ul）和有序列表（ol）以及列表项（li）来组织。

<ul id="menu">
  <li>一级菜单项
    <ul>
      <li>二级菜单项
        <ol>
          <li>三级菜单项</li>
        </ol>
      </li>
    </ul>
  </li>
</ul> 

上面的代码中，ul标签有一个id属性为“menu”，表示菜单的主体。一级菜单项是li标签，二级菜单项是嵌套在一级菜单项li标签中的ul标签和li标签，三级菜单项是嵌套在二级菜单项li标签中的ol标签和li标签。

接下来，使用CSS样式设置菜单的外观。

#menu {
  background-color: #eee;
  padding: 0;
  margin: 0;
  list-style: none;
}
#menu li:hover {
  background-color: #ddd;
}
#menu ul,
#menu ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
#menu ul li {
  position: relative;
  display: inline-block;
  vertical-align: top;
  margin: 0;
  padding: 0;
}
#menu ul ul {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
}
#menu ul ul li {
  display: block;
  width: 200px;
  white-space: nowrap;
}
#menu li:hover > ul {
  display: inline-block;
}
#menu ul ul li:hover > ol {
  display: inline-block;
} 

上面的代码中，为菜单设置了一些基本样式，如背景颜色、边距、内边距和列表样式。ul ul标签的display属性设置为none，表示二级和三级菜单项不可见。然后，使用嵌套css选择器（ > ）和:hover伪类来控制二级和三级菜单项的显示。当鼠标悬停在一级菜单项上时，它的子菜单（ul）将变为可见。当鼠标悬停在二级菜单项上时，它的子菜单（ol）将变为可见。

到这里，一个简单的CSS三级菜单就设置完成了。当然，您可以根据自己的需要对菜单进行更多的样式设置。