利用基本动画、滑动动画、淡入淡出、自定义动画和事件实现下拉列表框。我只是将所学的知识统统实现了一遍，但是如果加上排列和组合不止这九种。（这么神奇，又在吹牛吧。）附代码如下

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			ul {
				list-style: none;
			}
			
			.wrap {
				width: 330px;
				height: 30px;
				margin: 100px auto 0;
				background-image: url(bg.jpg);
				padding-left: 15px;
			}
			
			.wrap li {
				float: left;
				width: 100px;
				height: 30px;
				margin-right: 10px;
				position: relative;
			}
			
			.wrap a {
				color: black;
				text-decoration: none;
				display: block;
				width: 100px;
				height: 30px;
				text-align: center;
				line-height: 30px;
				background-image: url(libg.jpg);
			}
			
			.wrap li ul {
				position: absolute;
				display: none;
			}
		</style>
		<script type="text/javascript" src="../../../js/jquery-1.11.1.min.js"></script>
		<script>
			$(document).ready(function() {
//				// 方式一
//				$(".wrap li").mouseenter(function() {
//					$(this).children("ul").show();
//				});
//				$(".wrap li").mouseleave(function() {
//					$(this).children("ul").hide();
//				});
//				
//				// 方式二
//				$(".wrap li").hover(function() {
//					$(this).children("ul").show();
//				}, function() {
//					$(this).children("ul").hide();
//				});
//				// 方式三
//				$(".wrap li").hover(function() {
//					/!*alert("1");*!/
//					var $this = $(this).children("ul");
//					var isShow = $this.css("display");
//					if (isShow === "block") {
//						$this.hide();
//					} else {
//						$this.show();
//					}
//				});
//				// 方式四
//				$(".wrap li").hover(function() {
//					$(this).children("ul").slideToggle();
//				})
//			});
//			// 方式五
//			$(".wrap li").mouseenter(function() {
//				$(this).children("ul").slideDown();
//			});
//			$(".wrap li").mouseleave(function() {
//			$(this).children("ul").slideUp();
//			});
			// 方式六
//			$(".wrap li").mouseenter(function() {
//				$(this).children("ul").fadeIn(1000);
//			});
//			$(".wrap li").mouseleave(function() {
//			$(this).children("ul").fadeOut(1000);
//			});
            // 方式七
//          $(".wrap li").hover(function(){
//          	$(this).children("ul").fadeToggle();
//          })
            // 方式八
          $(".wrap li").mouseenter(function(){
          	$(this).animate({left:0},"fast",function(){
          		$(this).children("ul").show();
          	});
          });
          $(".wrap li").mouseleave(function(){
          	$(this).animate({left:0},"fast",function(){
          		$(this).children("ul").hide();
          	});
          });
			// 方式九 事件
//			$(".wrap").on("mouseenter","li",function(){
//				console.log($(this))
//				$(this).children("ul").show();
//			});
//			$(".wrap").on("mouseleave","li",function(){
//				$(this).children("ul").hide();
//			});
		});
		</script>
	</head>

	<body>
		<div class="wrap">
			<ul>
				<li>
					<a href="#">一级菜单1</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="#">一级菜单1</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="#">一级菜单1</a>
					<ul>
						<li><a href="#">二级菜单1</a></li>
						<li><a href="#">二级菜单2</a></li>
						<li><a href="#">二级菜单3</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</body>

</html>

效果如下：

jquery加下划线函数 jquery下拉列表框_下拉列表框