[分享]css两级菜单

CSS二级菜单是Web开发中常用的一种交互方式，它可以在页面中展示多层级的菜单，方便用户快速定位所需内容。下面我们来介绍一下如何实现CSS二级菜单。首先，我们需要使用HTML代码创建一个基本的菜单结构...

CSS二级菜单是Web开发中常用的一种交互方式，它可以在页面中展示多层级的菜单，方便用户快速定位所需内容。下面我们来介绍一下如何实现CSS二级菜单。

首先，我们需要使用HTML代码创建一个基本的菜单结构。这里我们使用无序列表<ul>和列表项<li>来构建菜单。代码如下：

<ul>
  <li>
    <a href="#">菜单项1</a>
    <ul>
      <li><a href="#">子菜单项1</a></li>
      <li><a href="#">子菜单项2</a></li>
      <li><a href="#">子菜单项3</a></li>
    </ul>
  </li>
  <li><a href="#">菜单项2</a></li>
</ul> 

接下来，我们就可以使用CSS样式来美化菜单了。首先，我们可以将子菜单隐藏起来，代码如下：

ul ul {
  display: none;
} 

然后，我们可以设置鼠标悬停在菜单项上时，显示对应的子菜单。代码如下：

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

这段代码的含义是，当鼠标悬停在列表项上时，找到该列表项下的子菜单（也就是<ul></ul>），将其显示出来。

最后，我们还可以为菜单项和子菜单设置不同的样式，比如不同的背景色、不同的字体颜色等。完整的CSS代码如下：

ul ul {
  display: none;
}
ul li:hover > ul {
  display: block;
}
ul {
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: #FFF;
}
ul li {
  display: block;
  position: relative;
  float: left;
  background-color: #FFF;
}
li ul {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #FFF;
}
li:hover {
  background-color: #F5F5F5;
}
li:hover a {
  color: #333;
}
li a {
  display: block;
  padding: 10px 20px;
  color: #666;
  text-decoration: none;
}
 
li:hover ul li a:hover {
  color: #FF6633;
} 

通过这些样式设置，我们就可以实现一个美观、实用的CSS二级菜单了。