css三级导航菜单 源码

CSS三级导航菜单是网站中非常常见的一种菜单类型，可以让用户方便地浏览网站的不同内容。下面是一个例子，带有清晰的注释，可以帮助你了解如何编写这样的菜单。

html,
body {
  margin: 0;
  padding: 0;
}
nav {
  background-color: #333;
  font-size: 0;
  text-align: center;
}
nav ul {
  display: inline-block;
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  vertical-align: top;
}
nav ul li {
  display: inline-block;
  margin: 0;
  padding: 0;
}
nav ul li:hover {
  background-color: #555;
}
nav a {
  color: #fff;
  display: block;
  padding: 10px;
  text-decoration: none;
}
nav ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #333;
}
nav ul ul li {
  display: block;
}
nav ul ul li a {
  padding: 10px;
}
nav ul li:hover > ul {
  display: inherit;
}
nav ul ul ul {
  left: 100%;
  top: 0;
} 

基本上，这是一个具有三级嵌套的纯CSS导航。第一级是一个具有水平列表的无序列表，第二级和第三级是垂直列表。在鼠标悬停在顶层列表项上时，会显示下拉菜单。