<div id="nav_l"></div>
<div id="nav_r"></div>
<div id="nav_title">
<ul>
<li><a href="#"><span>1</span></a></li>
<li><a id="show" href="#"><span>1</span></a></li>
<li><a href="#"><span>1</span></a></li>
<li><a href="#"><span>1</span></a></li>
<li><a href="#"><span>1区</span></a></li>
<li><a href="#"><span>\我们</span></a></li>
</ul>
</div>
CSS
#nav{ height:59px; margin-bottom:5px; background:url(../image/title.gif) 0 0 repeat-x;}
#nav_l{ float:left; height:36px; width:11px; overflow:hidden; margin-right:10px; background:url(../image/title.gif)0 -88px no-repeat;}
#nav_r{ float:right; height:36px; width:11px; overflow:hidden; margin-left:39px; background:url(../image/title.gif)-5px -88px no-repeat;}
#nav_title{ height:36px; overflow:hidden;}
#nav_title ul li{ float:left; font-size:14px; font-weight:bold; margin:5px 5px 0 5px;}
#nav_title ul li a{ float:left; color:#FFFFFF; display:block; height:26px; line-height:26px; padding-left:20px;}
#nav_title ul li a span{float:left; display:block; padding-right:20px;}
#nav_title ul li a:hover{ background:url(../image/title.gif)0 -193px no-repeat; color:#ffffff;}
#nav_title ul li a:hover span{ background:url(../image/title.gif)right -193px no-repeat; cursor:pointer;}
#nav_title ul li a#show{ height:36px; display:block; background:url(../image/title.gif)0 -229px no-repeat; color:#646464;}
#nav_title ul li a#show span{ height:36px; display:block; background:url(../image/title.gif)right -229px no-repeat;}
代码有点长 望见谅！ 在li中加入背景图片 #nav_r /#nav_l加上这个是一个圆角能在两边显示圆角 #nav_r /#nav_l在浏览的时候看不见圆角 #nav_title ul li a#show中显示了但上面还有背景图片 没有完全遮盖住
