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

使用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>

来源：https://www.cnblogs.com/mengfanrong/p/4620341.html

标签

下拉菜单

易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!