CSS实现2级菜单
在网页设计中，2级菜单的制作经常用到CSS技术。下面我们就来看看如何利用CSS实现2级菜单。
首先，在HTML中创建一个简单的菜单，用于展示2级菜单的效果：

<ul class="menu">
<li><a href="#">菜单1</a>
<ul class="submenu">
<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>
<li><a href="#">菜单3</a></li>
</ul>

接着，创建CSS样式来定义菜单和2级菜单的样式：

.menu {
list-style:none;
margin:0;
padding:0;
}
<br>
.menu li {
float:left;
position:relative;
}
<br>
.menu li a {
display:block;
padding:5px;
text-decoration:none;
color:#333;
background:#eee;
}
<br>
.menu li ul.submenu {
display:none;
position:absolute;
top:100%;
left:0;
margin:0;
padding:0;
z-index:1;
}
<br>
.menu li:hover ul.submenu {
display:block;
}
<br>
.menu li ul.submenu li {
float:none;
position:relative;
}
<br>
.menu li ul.submenu li a {
display:block;
padding:5px;
text-decoration:none;
color:#333;
background:#f2f2f2;
}
<br>
.menu li ul.submenu li:hover {
background:#ccc;
}
<br>
.menu li ul.submenu li:hover a {
color:#fff;
}

最后，给HTML中的菜单添加CSS样式类名即可看到2级菜单的效果：

<ul class="menu">
<li><a href="#">菜单1</a>
<ul class="submenu">
<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>
<li><a href="#">菜单3</a></li>
</ul>

通过上面的代码和步骤，实现2级菜单就变得非常简单了。希望本文能对你有所帮助。