JQuery -> 超级简单的下拉菜单

最新推荐文章于 2025-08-22 11:32:18 发布

feelang

最新推荐文章于 2025-08-22 11:32:18 发布

阅读量3.6k

点赞数 2

CC 4.0 BY-SA版权

文章标签： jquery javascript dropdown

本文链接：https://blog.youkuaiyun.com/FeeLang/article/details/25992625

本文介绍如何使用jQuery实现一个基本的下拉菜单，包括初始效果和鼠标悬浮效果，并提供了相应的HTML和CSS代码。

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

用jquery实现的一个超级简单的下拉菜单。

效果图

初始效果

鼠标悬浮效果

代码

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<style>

	nav a {
		text-decoration: none;
	}
	nav > ul > li {
		float: left;
		text-align: center;
		padding: 0 0.5em;
	}

	nav li ul.sub-menu {
		display: none;
		padding-left: 0 !important;
	}

	.sub-menu li {
		color: white;
	}

	.sub-menu li:hover {
		background-color: black;
	}

	.sub-menu li:hover a {
		color: white;
	}

	ul {
		list-style: none;
	}
</style>
</head>
<body>
	<nav>
	<ul>
		<li><a href="#">Home
		<ul class="sub-menu">
			<li><a href="#">sub1</a></li>
			<li><a href="#">sub2</a></li>
			<li><a href="#">sub3</a></li>
		</ul>
		</li>
		<li><a href="#">Programming
		<ul class="sub-menu">
		<li><a href="#">sub1</a></li>
			<li><a href="#">sub2</a></li>
			<li><a href="#">sub3</a></li>
		</ul>
		</li>
		<li><a href="#">Japanese
		<ul class="sub-menu">
			<li><a href="#">sub1</a></li>
			<li><a href="#">sub2</a></li>
			<li><a href="#">sub3</a></li>
		</ul>
		</li>		
	</ul>
	</nav>
</body>
<script type="text/javascript">
	$(document).ready(function() {
		$('nav li').hover(function() {
			$(this).find('.sub-menu').css('display', 'block');
		}, function() {
			$(this).find('.sub-menu').css('display', 'none');
		});
	});
</script>
</html>