菜单导航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;
}

　　

 

转载于:https://www.cnblogs.com/knowlege/p/3899402.html