Jquery练习三级菜单

abstract：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jqmenu</title> <script type="text/javascript" src="jq

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>jqmenu</title>
	<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
	<style type="text/css" media="screen">
	*{margin: 0px;padding: 0px;}
	li{list-style: none;float: left;}
	a {text-decoration: none; color: #fff;}
	div.menu {
	width: 606px;
	height: 40px;
	background: red;
	margin: 30px auto;
	}
	.one li {
	border-right: 1px solid #fff;position: relative;
	}
	.one li a{
		display: block;
	width: 100px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	}
	.one li a:hover {
		background: #ccc;
	}
	ul.two {
	position: absolute;
	} 
	.two li {
	    position: relative;
		top:0px;
		left:0px;
		background: blue;

	}
	ul.three {
	position: absolute;
	left: 100px;
	top: 0px;
	}
	</style>
	<script type="text/javascript">
		$(document).ready(function(){
			$(".two").hide()
			$(".three").hide()

			$(".one>li").mouseover(function() {
				$(this).find(".two").slideDown(300, function() {				
				});
			});
			$(".one>li").mouseleave(function() {
				$(this).find(".two").slideUp(100, function() {				
				});
			});

				$(".two>li").mouseover(function() {
				$(this).find(".three").slideDown(300, function() {				
				});
			});	
				$(".two>li").mouseleave(function() {
				$(this).find(".three").slideUp(100, function() {				
				});
			});




		})

	</script>
	</head>
<body>
<div class="menu">
	<ul class="one">
		<li><a href="#">首页</a>
		<ul class="two">
				<li><a href="#">php</a></li>
				<li><a href="#">js</a></li>
				<li><a href="#">jquery</a>
		</li>
	</ul>
		<li><a href="#">linux</a>
			<ul class="two">
				<li><a href="#">php</a></li>
				<li><a href="#">js</a></li>
				<li><a href="#">jquery</a>
							<ul class="three">
					<li><a href="#">php</a></li>
					<li><a href="#">js</a></li>
					<li><a href="#">jquery</a>

					</li>
					<li><a href="#">mysql</a></li>
				</ul>
				</li>
				<li><a href="#">mysql</a></li>
			</ul>
			
		</li>
		<li><a href="#">新闻</a></li>
		<li><a href="#">娱乐</a></li>
		<li><a href="#">军事</a></li>
		<li><a href="#">关于我们</a></li>
	</ul>
</div>
	

</body>
</html>

Correcting teacher：查无此人Correction time：2019-03-25 09:12:51
Teacher's summary：完成的不错。jq比js简单，牢记一些方法，继续加油

Jquery练习三级菜单

Popular Entries