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