js二级导航下拉菜单

时间：2023-03-09 20:54:53
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二级导航下拉菜单

可以兼容各个版本浏览器

相关文章