<!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二级导航下拉菜单的更多相关文章

  1. 纯CSS实现二级导航下拉菜单--css的简单应用

    思想:使用css的display属性控制二级下拉菜单的显示与否.当鼠标移动到一级导航菜单的li标签时,显示二级导航菜单的ul标签.由于实现起来比较简单,所以在这里直接给出了参考代码. 1.纯CSS二级 ...

  2. 用jquery制作一个二级导航下拉菜单

    1使用$(function(){...})获取到想要作用的HTML元素. 2通过使用children()方法寻找子元素.       3通过使用show()方法来显示HTML元素.       4通过 ...

  3. 用原生JS实现的一个导航下拉菜单，下拉菜单的宽度与浏览器视口的宽度一样（js+html+css）

    这个导航下拉菜单需要实现的功能是:下拉菜单的宽度与浏览器视口的宽度一样宽:一级导航只有两项,当鼠标移到一级导航上的导航项时,相应的二级导航出现.在本案例中通过改变二级导航的高度来实现二级导航的显示和消 ...

  4. (实用篇)jQuery+PHP+MySQL实现二级联动下拉菜单

    二级联动下拉菜单选择应用在在很多地方,比如说省市下拉联动,商品大小类下拉选择联动.本文将通过实例讲解使用jQuery+PHP+MySQL来实现大小分类二级下拉联动效果. 先看下效果 大类:  前端技术 ...

  5. JS列表的下拉菜单组件(仿美化控件select)

    JS列表的下拉菜单组件(仿美化控件select) 2014-01-23 23:51 by 龙恩0707, 1101 阅读, 6 评论, 收藏, 编辑 今天是农历23 也是小年,在这祝福大家新年快乐!今 ...

  6. js导航下拉菜单

    使用定时器.鼠标移动事件 var img = $('#user_head'); var menu = $('.nav_list'); var i=0; var timer; img.mouseente ...

  7. 兼容ie7的导航下拉菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. jq+css+html简单实现导航下拉菜单

    相信导航栏下拉菜单是web开发最常见的一个item了.这里就不做介绍了,直接上code. Html部分 <div class="_nav"> <ul id=&qu ...

  9. HTML DOM部分---做竖向横向的下拉导航 下拉菜单 图片轮播（圆点、箭头） 选项卡 进度条；

    1,竖向下拉导航 鼠标单击打开 再打击关闭 <style> *{ margin:0px auto; padding:0px;} div{ width:100px; height:50px; ...

随机推荐

  1. 利用JDK（1.6及以上版本）创建WebService

    一.什么是WebService WebService是一个SOA(面向服务的编程)的架构,它是不依赖于语言,不依赖于平台,可以实现不同的语言间的相互调用,通过Internet进行基于Http协议的网络 ...

  2. python之 list、tuple、dict、set

    2016-08-24   14:32:59 list Python内置的一种数据类型是列表:list.list是一种有序的集合,可以随时添加和删除其中的元素. 例如:定义一个列表L,里面存放了一些姓氏 ...

  3. C# 科学计数法转换成数字

    /// <summary> /// 判断输入的数是否是科学计数法.如果是的话,就会将其换算成整数并且返回,否则就返回false. /// </summary> /// < ...

  4. java_method_数据去重

    /** * 判断list本身是否有重复数据和标题 * * @param list * @return newList 返回没有重复数据的list */ public List<String[]& ...

  5. 程序中保存状态的方式之ViewState

    程序中保存状态的方式有以下几种: 1.Application 2.Cookie 3.Session 4.ViewState:ViewState是保存状态的方式之一,ViewState实际就是一个Hid ...

  6. Chrome 自动填充的表单是淡黄色的背景，有方法自定义吗

    input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset; }

  7. java多线程详解(1)-多线程入门

    一.多线程的概念 线程概念 线程就是程序中单独顺序的流控制. 线程本身不能运行,它只能用于程序中. 说明:线程是程序内的顺序控制流,只能使用分配给程序的资源和环境. 进程:操作系统中执行的程序 程序是 ...

  8. 一个简单的makefile

    #common makefile header LOCAL_INCLUDE := \ -I/xxx/ACE/ACE/ LOCAL_FLAGS := $(LOCAL_INCLUDE) LIBS := - ...

  9. 选择流程—— switch if else结构

    一.switch switch(表达式){ case 常量1: 语句; break; case 常量2: 语句; break; … default; 语句; } 例题:运用switch结构实现购物管理 ...

  10. Firefox每次刷新时自动清空缓存的设置方法

    当我们开发网页应用时候,为了保证每次看到的页面是最新的,需要在刷新页面时清除页面缓存. 如果每次都手动清除比较麻烦,好在多数浏览器都支持自动清除缓存的功能. IE下我们可以将缓存设置为"每次 ...