jquery做的导航菜单

	<div id="content"></div>
	<div id="menu_bar">
		<dl class="menu">
			<dt><span>文件管理</span></dt>
			<dd class="menuItem"><a href="#" class="menu_href">打开文件</a></dd>
			<dd class="menuItem"><a href="#" class="menu_href">删除文件</a></dd>
			<dd class="menuItem"><a href="#" class="menu_href">存储文件</a></dd>
			<dd class="menuItem"><a href="#" class="menu_href">关闭文件</a></dd>
			<dd class="menuItem"><a href="#" class="menu_href">退出</a></dd>
		</dl>
		<dl class="menu">
			<dt><span>编辑</span></dt>
			<dd class="menuItem"><a href="#" class="menu_href">重复操作</a></dd>
			<dd class="menuItem"><a href="#" class="menu_href">撤销操作</a></dd>
			<dd class="menuItem"><a href="#" class="menu_href">拷贝</a></dd>
			<dd class="menuItem"><a href="#" class="menu_href">粘贴</a></dd>
		</dl>					
	</div>

 

*{
			padding: 0px;
			margin: 0px;
			font-size:12px;
		}
		#menu_bar {
			position: absolute;
			left:50px;
			top:50px;
		}
		dl.menu {
			float:left;
			width:120px;
		}
		dl.menu dt {
			height:30px;
			background: #339;
			color:#fff;
			border-right:#ffffff 1px solid;
			text-align: center;
		}
		dl.menu dt span {
			position: relative;
			top:6px;
		}
		dd.menuItem {
			background: #911;
			color:#fff;
			border-bottom:#ffffff 1px solid;
			display: none;
			cursor:pointer;
			height:30px;
			border-right:#ffffff 1px solid;
			text-align: center;
		}
		dl.menu dd a {
			position: relative;
			top:6px;
		}
		a.menu_href:link,a.menu_href:visited {
			text-decoration: none;
			color:#fff;
		}
		dd.hoverClass {
			background:#393;
		}

 

$(function(){

		$(".menu").hover(function(){
			$(this).find("dd").css("display","block");
		},function(){
			$(this).find("dd").css("display","none");
		});
		
		$(".menu dd").hover(itemHover,itemHover);
		
		function itemHover() {
			$(this).toggleClass("hoverClass");
		}
	});

 

   meau项目查看