手把手教你做下拉列表

最新推荐文章于 2021-06-27 13:53:02 发布

最骚的就是你

最新推荐文章于 2021-06-27 13:53:02 发布

阅读量585

点赞数

分类专栏： web前端学习

本文链接：https://blog.csdn.net/libin_1/article/details/50287575

版权

web前端学习专栏收录该内容

301 篇文章 2 订阅

订阅专栏

<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8" />
		<script type="text/javascript" src="js/jquery-1.9.1.min.js" ></script>
		<title>Document</title>
		<style>
			.box {
				font-size: 14px;
				list-style: none;
				margin: 15px auto;
				padding: 0px;
				width: 1000px;
				color: white;
			}
			.box li {
				font-size: 14px;
				float: left;
				width: 200px;
				height: 35px;
				line-height: 35px;
				text-align: center;
				cursor: pointer;
				background: #333;
			}
			.box li .pox {
				list-style: none;
				margin: 0px;
				padding: 0px;
				display: none;
				color: red;
			}
			.box li .pox li{
				background: blueviolet;
			}
		</style>
		<script>
			$(function(){
				$('.box li').hover(function(){
					$(this).find('.pox').slideDown('normal');
				},function(){
					$(this).find('.pox').stop().slideUp('normal');
				});
			})
		</script>
	</head>

	<body>
		<ul class="box">
			<li>导航列表1
				<ul class="pox">
					<li> 导航列表11</li>
					<li>导航列表11</li>
					<li>导航列表11</li>
					<li>导航列表11</li>
					<li>导航列表11</li>
				</ul>
			</li>
			<li>导航列表2
				<ul class="pox">
					<li>导航列表22</li>
					<li>导航列表22</li>
					<li>导航列表22</li>
					<li>导航列表22</li>
					<li>导航列表22</li>
				</ul>
			</li>
			<li>导航列表3
				<ul class="pox">
					<li>导航列表33</li>
					<li>导航列表33</li>
					<li>导航列表33</li>
					<li>导航列表33</li>
					<li>导航列表33</li>
				</ul>
			</li>
			<li>导航列表4
				<ul class="pox">
					<li>导航列表44</li>
					<li>导航列表44</li>
					<li>导航列表44</li>
					<li>导航列表44</li>
					<li>导航列表44</li>
				</ul>
			</li>
			<li>导航列表5
				<ul class="pox">
					<li>导航列表55</li>
					<li>导航列表55</li>
					<li>导航列表55</li>
					<li>导航列表55</li>
					<li>导航列表55</li>
				</ul>
			</li>
		</ul>

	</body>

</html>

最骚的就是你

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
手把手教你做下拉列表

Document .box { font-size: 14px; list-style: none; margin: 15px auto; padding: 0px; width: 1000px; color: white; } .box li { font-size: 14px; float: left;
复制链接

扫一扫

专栏目录