CSS 3中伪类选择器在生成菜单中的应用

请看下面的CSS：

#menu ul .item {
display:none;
}

#menu ul:hover .item {
text-align:left;
display:block;
position:relative;
z-index: 1000;
font: 12px Geneva, Arial, Helvetica, sans-serif;
background:#8899A9;
padding:4px 10px;
margin: 0px;
line-height: 12px;
width: 140px;
border-right: 1px solid #6C7980;
border-bottom: 1px solid #6C7980;
border-left: 1px solid #6C7980;
}

释义：

当ul未处在hover状态时，他的子菜单项是隐藏的。

当ul处在hover状态时，就会显示子菜单。

具体的应用如下：

<div id="menu">
<ul>
<li class="top"><a href="index.html">首页</a></li>
</ul>
<ul>
<li class="top"><a href="#">关于我们</a></li>
<li class="item"><a href="#">公司简介</a></li>
<li class="item"><a href="#">公司资质</a></li>
</ul>

</div>

补充top样式：

#menu ul .top a {
color:#fff;
text-decoration:none;
}

#menu ul:hover .top {
background: url(../images/menu_bg.jpg) no-repeat 0px -23px;
}

这样制作菜单减少了很多js的操作，代码也非常干净。