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

＜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(http://www.codefans.net/jscss/demoimg/200907/atableft.gif) no-repeat left top;
         color: #fff;
         text-decoration: none;
         padding: 5px 0;
 }
 #navigation ul li span {
         background: url(http://www.codefans.net/jscss/demoimg/200907/atabright.gif) 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＞