<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>JQ 最少代码实现导航的下拉菜单</title>
<link rel="stylesheet" href="base.css" />
<style>
.t-nav{ background:#f60;}
.m-nav {margin:0 auto; width:480px; height:40px; overflow:hidden; display:block;}
.m-nav-item {background:#f60; float:left;}
.m-nav-item a {color:#fff; text-decoration:none; width:160px; height:40px; text-align:center; line-height:40px; display:block; font-weight:bold;}
.m-nav-item a:hover {color:#f60; text-decoration:none; background:#fff;}
.m-nav-item ul {display:none; position:absolute; width:160px; border: 1px solid #f60; border-top:0px;}
.m-nav-item li { border-top:1px solid #fff; background:#f60;}
.m-nav-item ul li a {color:#fff; text-decoration:none; width:160px; height:40px; text-align:center; line-height:40px; display:block; font-weight:bold;}
.m-nav-item ul li a:hover {color:#f60; text-decoration:none; background:#fff;}
</style>
</head>
<body>
<div class="t-nav">
<ul class="m-nav">
<li class="m-nav-item">
<a href="###">导航一</a>
<ul>
<li class="m-nav-item"><a href="###">导航一aaa</a></li>
<li class="m-nav-item"><a href="###">导航一bbb</a></li>
<li class="m-nav-item"><a href="###">导航一ccc</a></li>
</ul>
</li>
<li class="m-nav-item">
<a href="###">导航二</a>
<ul>
<li class="m-nav-item"><a href="###">导航二aaa</a></li>
<li class="m-nav-item"><a href="###">导航二bbb</a></li>
</ul>
</li>
<li class="m-nav-item">
<a href="###">导航三</a>
<ul>
<li class="m-nav-item"><a href="###">导航三aaa</a></li>
<li class="m-nav-item"><a href="###">导航三bbb</a></li>
<li class="m-nav-item"><a href="###">导航三ccc</a></li>
<li class="m-nav-item"><a href="###">导航三ddd</a></li>
</ul>
</li>
</ul>
</div>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script>
$(function() {
$('.m-nav-item').mousemove(function(){
if($(this).find('ul').is(':animated')==false){
$(this).find('ul').slideDown('normal');
}
});
$('.m-nav-item').mouseleave(function(){
$(this).find('ul').slideUp('normal');
});
});
</script>
</body>
</html>
效果图：