js二级导航下拉菜单

<!DOCTYPE html>
<html>
	<head>
		<title>导航列表</title>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
		<style type="text/css">
		*{margin: 0px;padding: 0px;}
		.list{width: 980px;margin: 0 auto;text-align: center;}
		.list:hover{cursor: pointer;}
		.first{list-style: none;margin-top: 10px;}
		.first li{float: left;width:107px ;height: 40px;background: #308ddc;line-height: 40px;border-right: 1px solid blue;}
		a{text-decoration: none;color: white;}
		.second{list-style: none;display: none;}
		.second1,.second2,.second3,.second4,.second5,.second6,.second7,.second8,.second9{display: none;list-style: none;border-right: none;}
		</style>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$("#news").hover(function(){
					$(".second1").slideToggle(100);
					$(".second1 li").css("background-color","#17304E");
				});
			});
			$(document).ready(function(){
				$("#school").hover(function(){
					$(".second2").slideToggle(100);
					$(".second2 li").css("background-color","#17304E");
				})
			});
			$(document).ready(function(){
				$("#departement").hover(function(){
					$(".second3").slideToggle(100);
					$(".second3 li").css("background-color","#17304E");
				})
			});
			$(document).ready(function(){
				$("#education").hover(function(){
					$(".second4").slideToggle(100);
					$(".second4 li").css("background-color","#17304E");
				})
			});
			$(document).ready(function(){
				$("#science").hover(function(){
					$(".second5").slideToggle(100);
					$(".second5 li").css("background-color","#17304E");
				})
			});
			$(document).ready(function(){
				$("#jobs").hover(function(){
					$(".second6").slideToggle(100);
					$(".second6 li").css("background-color","#17304E");
				})
			});
			$(document).ready(function(){
				$("#campus").hover(function(){
					$(".second7").slideToggle(100);
					$(".second7 li").css("background-color","#17304E");
				})
			});
			$(document).ready(function(){
				$("#hire").hover(function(){
					$(".second8").slideToggle(100);
					$(".second8 li").css("background-color","#17304E");
				})
			});
			$(document).ready(function(){
				$("#internation").hover(function(){
					$(".second9").slideToggle(100);
					$(".second9 li").css("background-color","#17304E");
				})
			});
		</script>
	</head>
	<body>
		<div class="list">
			<ul class="first">
				<li id="news">
					<a href="">新闻资讯</a>
					<ul class="second1">
						<li><a href="">新闻网</a></li>
						<li><a href="">电视台</a></li>
						<li><a href="">校报</a></li>
					</ul>
				</li>
				<li id="school">
					<a href="">校情概况</a>
					<ul class="second2">
						<li><a href="">学校简介</a></li>
						<li><a href="">漫游校史</a></li>
						<li><a href="">现任领导</a></li>
						<li><a href="">历史名人</a></li>
						<li><a href="">领导关怀</a></li>
						<li><a href="">卓越联盟</a></li>
						<li><a href="">重庆大学联盟</a></li>
					</ul>
				</li>
				<li id="departement">
					<a href="">机构设置</a>
					<ul class="second3">
						<li><a href="">教学单位</a></li>
						<li><a href="">管理服务</a></li>
					</ul>
				</li>
				<li id="education">
					<a href="">教育教学</a>
					<ul class="second4">
						<li><a href="">教师队伍</a></li>
						<li><a href="">本科生教育</a></li>
						<li><a href="">研究生教育</a></li>
						<li><a href="">国际教育</a></li>
						<li><a href="">继续教育</a></li>
						<li><a href="">网络教育</a></li>
						<li><a href="">实验教学示范中心</a></li>
					</ul>
				</li>
				<li id="science">
					<a href="">科学研究</a>
					<ul class="second5">
						<li><a href="">科研平台</a></li>
						<li><a href="">博士生流动站</a></li>
						<li><a href="">自然科学研究</a></li>
						<li><a href="">人文社会科学研究</a></li>
						<li><a href="">学术期刊</a></li>
						<li><a href="">科协</a></li>
					</ul>
				</li>
				<li id="jobs">
					<a href="">招生就业</a>
					<ul class="second6">
						<li><a href="">网络教育招生</a></li>
						<li><a href="">本科生招生</a></li>
						<li><a href="">本科生就业</a></li>
						<li><a href="">研究生招生就业</a></li>
						<li><a href="">继续教育招生</a></li>
					</ul>
				</li>
				<li id="campus">
					<a href="">校园风采</a>
					<ul class="second7">
						<li><a href="">学生活动</a></li>
						<li><a href="">社会实践</a></li>
						<li><a href="">群团组织</a></li>
						<li><a href="">纪念品</a></li>
					</ul>
				</li>
				<li id="hire">
					<a href="">人才招聘</a>
					<ul class="second8">
						<li><a href="">应聘重大</a></li>
						<li><a href="">人才政策</a></li>
						<li><a href="">人才服务</a></li>
						<li><a href="">生活指南</a></li>
					</ul>
				</li>
				<li id="internation">
					<a href="">国际交流</a>
					<ul class="second9">
						<li><a href="">国际合作与交流</a></li>
						<li><a href="">学生海外交流项目</a></li>
						<li><a href="">港澳台交流</a></li>
						<li><a href="">来华留学生</a></li>
						<li><a href="">国际合作交流暨港澳台工作简报</a></li>
						<li><a href="">办理指南</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</body>
</html>

可以兼容各个版本浏览器

js二级导航下拉菜单,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。