非常实用的CSS菜单

css菜单用图:

css菜单-CSS:

#nav{list-style:none}
#nav li{
float:left;
font-weight:bold;
height:60px;
background:url(../images/navbg.png) #fff repeat-x left bottom;
padding:0
}
#nav a{
text-align:center;
padding-top:20px;
display: block;
height:40px;
line-height:40px
}
#nav li a.one{width:80px}
#nav li a.two{width:80px}
#nav li a.three{width:80px}
#nav li a.four{width:80px}
#nav li a.five{width:100px}
#nav li a.six{width:106px}
#nav li a.seven{width:100px}
#nav li a.eight{width:80px}
#nav li a.nine{width:92px}

#nav li a:hover.one{background:url(../images/navunbg.gif) no-repeat -8px 0}
#nav li a:hover.two{background:url(../images/navunbg.gif) no-repeat -8px -60px}
#nav li a:hover.three{background:url(../images/navunbg.gif) no-repeat -8px -120px}
#nav li a:hover.four{background:url(../images/navunbg.gif) no-repeat -8px -180px}
#nav li a:hover.five{background:url(../images/navunbg.gif) no-repeat 4px -240px}
#nav li a:hover.six{background:url(../images/navunbg.gif) no-repeat 8px -300px}
#nav li a:hover.seven{background:url(../images/navunbg.gif) no-repeat 4px -360px}
#nav li a:hover.eight{background:url(../images/navunbg.gif) no-repeat -8px -420px}
#nav li a:hover.nine{background:url(../images/navunbg.gif) no-repeat 0 -480px}

css菜单-HTML:

<ul id="nav">
 <li><a href="#" class="ones">网站首页</a></li>
 <li><a href="#" class="two">关于我们</a></li>
 <li><a href="#" class="three">行业新闻</a></li>
 <li><a href="#" class="four">服务项目</a></li>
 <li><a href="#" class="five">建站服务流程</a></li>
 <li><a href="#" class="six">网站成功案例</a></li>
 <li><a href="#" class="seven">网站使用指南</a></li>
 <li><a href="#" class="eight">意见反馈</a></li>
 <li><a href="#" class="nine">联系我们</a></li>
</ul>

效果图:

转载于:https://www.cnblogs.com/shengforever/archive/2009/07/17/1525908.html