菜单导航tab切换样式的⼩技巧
1、最终效果
2、HTML结构
<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>
3、CSS代码
.
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;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。