html导航相关样式表,css3导航条

* {

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

}