Jquery+CSS Menu菜单

效果图：

HTML代码：

<!--menu-->
		<div id="bar">
					<div id="menu-container"  style="width:500px;float:left;position:relative;">
						<ul id="navigationMenu">	
							<li><a href="FlucStockManager.aspx" class="normalMenu">WMS-入库查询及确认</a></li>
							<li><a href="OutBoundInfoSearch.aspx" class="normalMenu">WMS-出库查询</a></li>	
							<li><a href="#" class="normalMenu" οnclick="QuitLogin('MyCook','');">退出 系统</a></li>
						</ul>
					</div>
		</div>

CSS代码：

 /* 导航菜单css */

/*导航菜单背景*/
#bar 
{
	width: 100%;
	height: 35px;
	padding: 15px 0;
	background: url(../images/bar.png) repeat-x;
	position:absolute;
}
ul {
	height: 35px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}

ul li {
		border: 1px solid #444444;
		display: inline-block;
		float: left;
		height: 35px;
		list-style-type: none;
		overflow: hidden;
	}

ul li a, ul li a:hover,ul li a:visited 
{
			text-decoration: none;
}

.normalMenu, .normalMenu:visited,
.hoverMenu, .hoverMenu:visited,
.selectedMenu, .selectedMenu:visited {
	outline: none;
	padding-top: 10px;
	padding-left: 15px;
	padding-bottom: 15px;
	padding-right: 15px;
	display: block;
	text-align: center;
}

.hoverMenu, .hoverMenu:visited,
.selectedMenu, .selectedMenu:visited {
		display: block;
		margin-top: -25px;
		background: url(../images/grey_bg.gif) repeat-x #eeeeee;
		color: #444444;
	}

.selectedMenu, .selectedMenu:visited {
			margin: 0;
		}

.normalMenu, .normalMenu:visited {
		color: white;
		margin-top: -15px;
		background: url(../images/dark_bg.gif) repeat-x #444444;
	}

CSS中用到的图片：

dark_bg.gif：grey_bg.gif：

JS代码：

<script src="js/jquery-1.7.1.js"></script>
$(document).ready(function ()
{
	//menu
	$('#navigationMenu li .normalMenu').each(function () {
		$(this).before($(this).clone().removeClass().addClass('hoverMenu'));
	});

	$('#navigationMenu li').hover(function () {
		$(this).find('.hoverMenu').stop().animate({ marginTop: '1px' }, 200);
	},
	function () {
		$(this).find('.hoverMenu').stop().animate({ marginTop: '-25px' }, 200);
	});
});