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的操作，代码也非常干净。