www.gusucode.com > 鼠标经过变色导航菜单代码源码程序 > 鼠标经过变色导航菜单代码/style.css

    @charset "utf-8";
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;text-decoration:none;}
html{background:#d5bd89 url(images/bgHtml.jpg) repeat }
body{background:url(images/bgBody.png) no-repeat top center; min-height:450px; }
.demo{width:960px;margin:0 auto;padding-top:130px;_height:500px;}


/* nav */
.nav{height:80px;overflow:hidden;}
.nav ul li{display:inline-block;position:relative;float:left;margin:0 6px 20px 0;}
.nav ul li a{background:url(images/bgNav.png) no-repeat;text-indent:-9999px;height:80px;width:155px;text-align:center;display:block;position:relative;float:left;}
.nav ul li a span{background:url(images/bgNav.png) no-repeat;display:none;position:absolute;left:0;top:0;height:80px;width:155px;}
.nav .last{margin-right:0;}

#nHom{background-position:0 0 }
#nAbo{background-position:-155px 0px }
#nPro{background-position:-310px 0px }
#nNew{background-position:-465px -80px }
#nSer{background-position:-620px -80px }
#nCon{background-position:-775px 0px }

#nHom span{background-position:0 -80px }
#nAbo span{background-position:-155px -80px }
#nPro span{background-position:-310px -80px }
#nNew span{background-position:-465px 0px; display:block }
#nSer span{background-position:-620px 0px; display:block }
#nCon span{background-position:-775px -80px }

/* Hover States */
.cssOnly #nHom:hover{background-position:0 -80px }
.cssOnly #nAbo:hover{background-position:-155px -80px }
.cssOnly #nPro:hover{background-position:-310px -80px }
.cssOnly #nNew span:hover{background-position:-465px -80px }
.cssOnly #nSer span:hover{background-position:-620px -80px }
.cssOnly #nCon:hover{background-position:-775px -80px }
/* Active State */
.active #nHom{background-position:0 -160px }