黑色与红色形成的水平CSS导航菜单

演示效果截图

用到的图片

CSS代码

#foxmenucontainer{height:24px;background:#000;
display:block;padding:45px 0 0 15px;}
#foxmenu{position:relative;display:block;height:24px;
font-size:11px;font-weight:bold;
font-family:Arial,Verdana,Helvitica,sans-serif;}
#foxmenu ul{margin:0px;padding:0;list-style-type:none;auto;}
#foxmenu ul li{display:block;float:left;margin:0 1px 0 0;}
#foxmenu ul li a{display:block;float:left;color:#fff;
text-decoration:none;padding:5px 20px 0 20px;height:19px;
background:transparent url(images/foxmenu_bg-OFF.gif) no-repeat top left;}
#foxmenu ul li a:hover{color:#fff;
background:transparent url(images/foxmenu_bg-OVER.gif) no-repeat top right;}
#foxmenu ul li a.current,#foxmenu ul li a.current:hover{
color:#000;background:#fff;}

HTML代码

<div id="foxmenucontainer">
<div id="foxmenu">
<ul>
<li><a href="http://www.865171.cn">Home</a></li>
<li><a href="http://www.865171.cn">About Us</a></li>
<li><a href="http://www.865171.cn" class="current">Services</a></li>
<li><a href="http://www.865171.cn">Our Work</a></li>
<li><a href="http://www.865171.cn">www.865171.cn</a></li>
</ul>
</div>
</div>