CSS样式: 代码: <style type="text/css"> <!-- #siteNav { clear: both; float:left; width:750px; padding-left: 1px; background: #fff; font-size:12px; font-weight: bold; line-height:normal; border-bottom:2px solid #84B0C7; voice-family: "\"}\""; voice-family: inherit; width: 749px; } #siteNav ul { margin:0; padding:0; list-style:none; } #siteNav li { display:inline; margin:0; padding:0; } #siteNav a { float:left; background:url(tableft.gif) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #siteNav a span { float:left; display:block; background:url(tabright.gif) no-repeat right top; padding:5px 11px 4px 5px; color:#036; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #siteNav a span { float:none } /* End IE5-Mac hack */ #siteNav a:hover span { color:#036; } #siteNav a:hover { background-position:0% -42px; } #siteNav a:hover span { background-position:100% -42px; } #siteNav #sel a { background-position:0% -42px; } #siteNav #sel a span { background-position:100% -42px; } --> </style> XHTML代码: HTML: <div id="siteNav"> <ul> <li id="sel"><a href="#"><span>首页</span></a></li> <li><a href="#"><span>资讯</span></a></li> <li><a href="#"><span>人物</span></a></li> <li><a href="#"><span>管理</span></a></li> <li><a href="#"><span>经营</span></a></li> <li><a href="#"><span>财经</span></a></li> <li><a href="#"><span>技术</span></a></li> <li><a href="#"><span>产品</span></a></li> <li><a href="#"><span>网络</span></a></li> <li><a href="#"><span>电信</span></a></li> <li><a href="#"><span>评论</span></a></li> <li><a href="#"><span>博客</span></a></li> <li><a href="#"><span>老友记</span></a></li> <li><a href="#"><span>滚动</span></a></li> <li><a href="#"><span>搜索</span></a></li> <li><a href="#"><span>WAP</span></a></li> </ul> </div> 两个图片见附件!