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 }