演示地址：/codedemo/techdemo.html
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 rightright 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部分：

<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>