jquery实现下拉菜单-CSDN博客

本文链接：https://blog.csdn.net/feijinxinsi/article/details/84806419

html代码：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
	<script src="script.js" type="text/javascript"></script>
</head>
</head>
<body>
	<div id="navMenu">
		<ul>
			<li><a href="#">Home</a>
				<ul>
					<li>
						<a href="#">DropDown</a>
						<a href="#">DropDown</a>
						<a href="#">DropDown</a>
						<a href="#">DropDown</a>
					</li>
				</ul>
			</li>
			<li><a href="#">About</a>
				<ul>
					<li><a href="#">DropDown</a></li>
					<li><a href="#">DropDown</a></li>
					<li><a href="#">DropDown</a></li>
					<li><a href="#">DropDown</a></li>
				</ul>
			</li>
			<li><a href="#">Media</a></li>
			<li><a href="#">Contact</a></li>
		</ul>
	</div>
</body>
</html>

css代码：

body{background: #ededed;}

#navMenu{margin-top: 50px;}

#navMenu ul{margig:0; padding: 0; list-style: none;background: #252525;text-align: center;position: relative;}

#navMenu ul li {display: inline-block;}

#navMenu ul li a{display: block; height:35px; width: 150px; color:#fff;font-family: helvetica;line-height: 43px;text-decoration: none;
transition: background 0.5s linear 0s, color 0.5s linear 0s;}

#navMenu ul li a:hover{background: #f0300b; color: #781705;}

#navMenu ul ul{position: absolute; width: 150px; display: none;}

#navMenu ul ul li{display: block; background: #252525;}

js代码

$(document).ready(function(){

	$("#navMenu ul li").hover(function(){

		$(this).find("ul").stop().slideToggle(200);
	});
});

参考链接：https://www.youtube.com/watch?v=J4YbclCQS98