用JQuery做一个简单的下拉列表

用JQuery做一个简单的下拉列表

1、以下是效果图

2、下面是css样式

<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			ul {
				list-style: none;
			}
			
			.biao {
				width: 330px;
				height: 30px;
				margin: 100px auto 0;
				background-image: url(bg.jpg);
				padding-left: 15px;
			}
			
			.biao li {
				float: left;
				width: 100px;
				height: 30px;
				margin-right: 10px;
				position: relative;
			}
			
			.biao a {
				color: aliceblue;
				text-decoration: none;
				display: block;
				width: 100px;
				height: 30px;
				text-align: center;
				line-height: 30px;
				background-color: red;
				background-image: url(libg.jpg);
			}
			.biao1 {
				color: aliceblue;
				text-decoration: none;
				display: block;
				width: 100px;
				height: 30px;
				text-align: center;
				line-height: 30px;
				background-color: aqua;
				background-image: url(libg.jpg);
			}
			.biao li ul {
				position: absolute;
				display: none;
				
			}
		</style>

3、下面是html

<div class="biao">
			<ul>
				<li>
					<a href="#">首页</a>
					<ul>
						<li><a href="#">菜单1</a></li>
						<li><a href="#">菜单2</a></li>
						<li><a href="#">菜单3</a></li>
					</ul>
 
				</li>
				<li>
					<a href="#">首页</a>
					<ul>
						<li><a href="#">菜单1</a></li>
						<li><a href="#">菜单2</a></li>
						<li><a href="#">菜单3</a></li>
					</ul>
				</li>
				<li>
					<a href="#">首页</a>
					<ul>
						<li><a href="#">菜单1</a></li>
						<li><a href="#">菜单2</a></li>
						<li><a href="#">菜单3</a></li>
					</ul>
				</li>
			</ul>
	</div>
	

4、下面是js代码

<script type="text/javascript">
		$(document).ready(function(){
			$(".biao li").mouseenter(function() {
					$(this).children("ul").show();
					
				});
				
				$(".biao li").mouseleave(function() {
					$(this).children("ul").hide();
				});
		})
	
	</script>