简单漂亮的导航条，半弧形的菜单背景，鼠标放上变色，而且是不同的颜色，现在流行的一种菜单样式，个人很喜欢。

<title>
    导航条
</title>
<style type="text/css">
body {background-color:#333;}
#navigation {
background: #333  ;
border-bottom: 1px solid #a1a1a1  ;
margin: 0;
padding: 0;
}
 #navigation ul, #navigation ul li {
         list-style: none;
         margin: 0;
         padding: 0;
 }
 #navigation ul {
         padding: 5px 0 5px;
         text-align: center;
 }
 #navigation ul li {
         display: inline;
 }
 #navigation ul li a {
         background: url([url=http://www.codefans.net/jscss/demoimg/200907/atableft.gif]http://www.codefans.net/jscss/demoimg/200907/atableft.gif[/url]) no-repeat left top;
         color: #fff;
         text-decoration: none;
         padding: 5px 0;
 }
 #navigation ul li span {
         background: url([url=http://www.codefans.net/jscss/demoimg/200907/atabright.gif]http://www.codefans.net/jscss/demoimg/200907/atabright.gif[/url]) no-repeat right top;
         padding: 5px 7px 5px 3px;
         margin: 4px 0 4px 4px;
 }
 #navigation ul li a:hover span {
         text-decoration: none;
         background-position: 100% -75px;
 }
 #navigation ul li a:hover {
         background-position: 0 -75px;
 }
 #navigation #current a {
         background-position: 0 -150px;
 }
 #navigation #current a span {
         background-position: 100% -150px;
 }
 /*\*//*/
 #navigation ul li a {
         display: inline-block;
         white-space: nowrap; 
         width: 1px;
 }
 #navigation ul {
         padding-bottom: 0;
         margin-bottom: -1px;
 }
 
 /*\*/
 * html #navigation ul li a {
         padding: 0;
 }
</style>
<div id="navigation">
    <ul>
        <li>
        </li>
        <li id="current">
            <a href="#">源码首页</a> 
        </li>
        <li>
            <a href="#">博客</a> 
        </li>
        <li>
            <a href="#">源码爱好者</a> 
        </li>
        <li>
            <a href="#">网页特效</a> 
        </li>
        <li>
            <a href="#">分类导航</a> 
        </li>
        <li>
            <a href="#">网站留言</a> 
        </li>
        <li>
        </li>
    </ul>
</div>