请看下面的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的操作,代码也非常干净。