手把手教你做下拉列表-阿里云开发者社区

手把手教你做下拉列表

2015-12-13 1480

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

<!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>

手把手教你做下拉列表

热门文章

最新文章

相关课程

相关电子书

相关实验场景