css二级下拉导航菜单

CSS二级下拉导航菜单是网站设计中常用的一种菜单形式。通过嵌套无序列表和CSS样式，我们可以实现一个美观、易用的下拉菜单。

<ul class="menu">
  <li><a href="#">菜单一</a>
    <ul>
      <li><a href="#">子菜单一</a></li>
      <li><a href="#">子菜单二</a></li>
      <li><a href="#">子菜单三</a></li>
    </ul>
  </li>
  <li><a href="#">菜单二</a>
    <ul>
      <li><a href="#">子菜单四</a></li>
      <li><a href="#">子菜单五</a></li>
      <li><a href="#">子菜单六</a></li>
    </ul>
  </li>
</ul>

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

.menu li {
  display: inline-block;
  position: relative;
}

.menu a {
  display: block;
  padding: 10px;
  color: #fff;
  background-color: #333;
  text-decoration: none;
}

.menu ul {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
}

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

.menu ul li {
  display: block;
  white-space: Nowrap;
}

.menu ul a {
  padding: 10px 20px;
}

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

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

我们首先定义一个ul元素作为菜单的容器，并给它添加一个menu class。这里我们采用了display:inline-block来让菜单项排列在同一行，并使用position:relative来设置子菜单的位置。

接着，我们定义菜单项的样式，包括文字颜色、背景颜色和鼠标悬停效果等。给ul和li元素分别设置了margin和padding为0，以免出现多余的空白。

然后，我们定义了子菜单ul的样式，并通过position:absolute和top:100%将它放在菜单项下方。同时，我们设置了display:none来隐藏子菜单，使其在鼠标悬浮时才显示。

最后，我们通过:hover伪类来实现鼠标悬浮时的效果，并通过嵌套ul元素来实现二级下拉菜单。

以上就是CSS二级下拉导航菜单的实现代码。通过这种简单的方式，我们可以轻松地实现一个美观、易用的下拉菜单。