一个朋友没事写的一款简单的导航菜单 ，利用了css ul li来实例的，有需要的朋友可以参考一下这个简单效果。
代码如下
复制代码
用到的背景图片
代码如下，一定要引用jQuery132.js库哦，别的也可以
<!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"><head runat="server"><title></title>
<script src="../jquery132min.js" type="text/javascript"></script>
<script type="text/javascript">$(function() {$("ul>li").click(function() {$("ul>li").each(function() { $(this).removeClass("_lishow"); });$(this).addClass("_lishow");});});</script>
<style type="text/css">ul{list-style-type: none;border: 0px blue solid;height: 27px;width: 480px;}ul li{list-style-type: none;float: left;width: 74px;height: 27px;line-height: 27px;text-align: center;background-color: #CCCCFF;background: url(../images/tab.gif);background-position: -74px 0px;}ul li:hover{cursor: pointer;}._lishow{background: url(../images/tab.gif);background-position: 0px 0px;}</style></head><body><div><ul><li class="_lishow">Menu1</li><li>Menu2</li><li>Menu3</li><li>Menu4</li><li>Menu5</li><li>Menu6</li></ul><br /></div>
</body></html>
