横向下拉菜单

1.思路

通过li嵌套ul的方法实现当鼠标移动到li上使ul显示/隐藏切换的效果,在显示和隐藏的同时使用stop()方法终止动画.

2.代码

<html>

	<head>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
		</script>
		<title></title>
		<style type="text/css">
			#app {
				width: 800px;
				margin: 70px auto;
				height: 500px;
			}
			li{
				list-style: none;
			}
.aa{
  width:100px
}
			.Top{
				width: 100px;
				height: 50px;
				background-color: skyblue;
				
				text-align: center;
				line-height: 50px;
				cursor: pointer;
				display: block;
			}
			
			.Foot li{
				width: 300px;
				height: 300px;
				background-color: chartreuse;
				display: none;
				overflow: hidden;
			}

		</style>
	</head>

	<body>
		<div id="app">
			<ul>
				<li class="aa">
					<span class="Top">
						test
					</span>
					<ul class="Foot">
						<li class="bb">
							
						</li>
					</ul>
				</li>

			</ul>

		</div>
	</body>
	<script type="text/javascript">
		$(function(){
			$(".aa").hover(function(){
				$(".bb").stop().slideDown();
			},function(){
				$(".bb").slideUp();
			})
		})
	</script>

</html>

3.点击我看演示

posted @ 2021-11-20 00:00  禾耳  阅读(88)  评论(0)    收藏  举报