Html
    Css
    Js
* {
	margin:0;
	padding:0;
}
li {
	list-style:none;
}
a {
	text-decoration:none;
}
.nav {
	width:100%;
	float:left;
}
.nav ul li {
	float:left;
}
.nav ul li a {
	position:relative;
	z-index:2;
	font-size:14px;
	color:#666666;
	text-align:center;
	line-height:46px;
	display:inline-block;
	width:88px;
	height:46px;
	transition:all .4s;
	-moz-transition:all .4s;
	-webkit-transition:all .4s;
	-o-transition:all .4s;
}
.nav ul li a:hover {
	color:#ffffff !important;
}
.nav ul li a:hover:after {
	opacity:1;
	transform:scale(1);
}
.active {
	color:#ffffff !important;
}
.active:after {
	transform:scale(1) !important;
	opacity:1 !important;
}
.nav-a:after {
	content:'';
	position:absolute;
	z-index:-1;
	width:100%;
	height:100%;
	top:0;
	left:0;
	background-color:#319a51;
	transition:all .4s;
	-moz-transition:all .4s;
	-webkit-transition:all .4s;
	-o-transition:all .4s;
	opacity:0;
	transform:scale(0);
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

css3导航条

原理:通过伪类来制作绿色背景,通过缩放来实现效果!

0