[分享]css两级分层导航

CSS两级分层导航是一种常见的网页导航方式，它可以方便用户快速地找到自己需要的页面。在实现这种导航时，我们通常会使用CSS对导航进行样式设置，从而实现美观的效果。.nav { liststyle: n...

CSS两级分层导航是一种常见的网页导航方式，它可以方便用户快速地找到自己需要的页面。在实现这种导航时，我们通常会使用CSS对导航进行样式设置，从而实现美观的效果。

.nav {
  list-style: none;
  display: flex;
  background-color: #f6f6f6;
  padding: 0;
}

.nav li {
  margin-right: 20px;
  line-height: 40px;
  position: relative;
}

.nav li:hover {
  background-color: #fff;
}

.nav li a {
  color: #333;
  text-decoration: none;
  padding: 0 10px;
}

.nav li:hover ul {
  display: block;
}

.nav ul {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
  list-style: none;
  background-color: #fff;
  padding: 0;
  margin: 0;
}

.nav ul li {
  margin-right: 0;
  text-align: left;
  white-space: nowrap;
  padding: 10px 20px;
}

.nav ul li:hover {
  background-color: #f6f6f6;
}

.nav ul li a {
  color: #333;
  text-decoration: none;
} 

上面的代码演示了如何使用CSS实现两级分层导航。首先，我们使用了flexbox布局来让导航菜单横向排列，并去除了列表项的默认样式。我们给每个列表项设置了相对定位，并使用ul和li标签完成了子菜单的嵌套结构。

我们针对列表项和子菜单分别设置了hover事件来实现鼠标悬停效果，也为两层菜单设置了相应的样式。最终，我们得到了美观、易于操作的两级分层导航菜单。