JQ 最少代码实现导航的下拉菜单-优快云博客

本文介绍使用jQuery和CSS实现导航栏下拉菜单的方法。通过简单的代码，展示如何创建一个响应鼠标悬停事件并显示隐藏子菜单的导航系统。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>

效果图：