首页 > 代码库 > 菜单导航tab切换样式的小技巧

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

2024-07-16 12:13:14   214人阅读

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;}

　　

 


联系
我们