分享一个非常美观的导航菜单
在网页美工制作中，制作导航是常有的事情，下面分享一个非常美观简洁的一个导航菜单，可以直接应用到网站中，这种导航菜单是常用的，仅利用了css的样式就实现了，源码一看就懂，如果想要改变导航样式，只需要修改 images/ 下的导航图片就可以了，快试试吧。
源码效果图：
源码文件：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<meta name="author" content="memory" />
<title>无标题 1</title>
</head>
<style type="text/css">
ul#menunav,ul#menunav li{padding: 0px;margin: 0px; list-style: none;}
ul#menunav{width:980px; height:45px; background:url(./images/index_16.jpg) left 8px no-repeat;padding-left:6px;overflow:hidden;}
ul#menunav li{float: left; color:#ffffff; line-height:51px; display:inline-block; font-size:12px;background: url(./images/index_18.jpg) left 8px repeat-x; height:45px; overflow:hidden;}
ul#menunav li.right{background:url(./images/index_21.jpg) left 8px no-repeat; width:6px;float:left;overflow:hidden;}
ul#menunav li a{color:#ffffff; text-decoration: none; width:92px; display:inline-block; text-align:center; font-size:13px; font-weight: bold;}
ul#menunav li a.hit,ul#menunav li a:hover{background:url(./images/index_12.jpg) no-repeat; color: maroon;}
</style>
<body>
<ul id="menunav">
<li class="left"></li>
<li><a href="#" class="hit">佳音首页</a>|</li>
<li><a href="#">我的佳音</a>|</li>
<li><a href="#">相亲1+1</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><a href="#">会员俱乐部</a>|</li>
<li><a href="#">佳音娱乐</a></li>
<li class="right"></li>
</ul>
</body>
</html>