菜单导航tab切换样式的小技巧

<div class="licaiMenu">
<ul class="navi">
<li><a href="">产品管理</a></li>
<li class="hover"><a href="">员工管理</a></li>
<li><a href="">公告管理</a></li>
</ul>
</div>

.licaiMenu .navi{
border-bottom: solid 1px #ccd0d5;
height: 36px;/*关键*/
padding: 0 18px;
}
.licaiMenu .navi li{
float: left;
line-height: 37px;
height: 37px;/*关键*/
overflow: hidden;
width: 130px;
margin-right: 10px;
position: relative;
overflow: hidden;
background-image: url(../Images/index_collect_3th.png);
background-position: -370px -519px;
background-repeat: no-repeat;
text-align:center;

}
*html .licaiMenu .navi li{
/*ie6*/
margin-bottom:-1px;
}
.licaiMenu .navi li a{
color:#666666;
font-family:"microsoft yahei";
font-size:16px;
}
.licaiMenu .navi li.hover a{
color:#ff4400;
}
.licaiMenu .navi li.hover {
background-image: url(../Images/index_collect_3th.png);
background-position: -370px -480px;
background-repeat: no-repeat;
}