非常酷的渐变水平菜单

非常不错的水平渐变菜单，使用了三张repeat图片<自己可以改变>，并选择其中的一个菜单项处于选中状态来避免未触发hover而带来的图片加载延迟。

CSS代码:

<style type="text/css">
#stylefour{position:relative;display:block;height:39px;font-size:11px;
font-weight:bold;background:transparent url(media/bgOFF.gif) repeat-x top left;
font-family:Arial,Verdana,Helvitica,sans-serif;border-top:4px solid #B30000;}
#stylefour ul{margin:0;padding:0;list-style-type:none;width:auto;}
#stylefour ul li{display:block;float:left;margin:0;}
#stylefour ul li a{display:block;float:left;color:#666;text-decoration:none;
padding:11px 20px 0 20px;height:23px;
background:transparent url(media/bgDIVIDER.gif) no-repeat top right;}
#stylefour ul li a:hover,#stylefour ul li a.current{color:#B30000;
background:#fff url(media/bgON.gif) no-repeat top left;}
</style>

HTML代码:

<div id="stylefour">
<ul>
<li><a href="#" title="">Home</a></li>
<li><a href="#" title="">About Us</a></li>
<li><a href="#" title="" class="current">Services</a></li>
<li><a href="#" title="">Our Work</a></li>
<li><a href="#" title="">Contact Us</a></li>
</ul>
</div>

谢谢分享.精神鼓励

谢谢LZ分享。