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二级导航下拉菜单的更多相关文章
- 纯CSS实现二级导航下拉菜单--css的简单应用
思想:使用css的display属性控制二级下拉菜单的显示与否.当鼠标移动到一级导航菜单的li标签时,显示二级导航菜单的ul标签.由于实现起来比较简单,所以在这里直接给出了参考代码. 1.纯CSS二级 ...
- 用jquery制作一个二级导航下拉菜单
1使用$(function(){...})获取到想要作用的HTML元素. 2通过使用children()方法寻找子元素. 3通过使用show()方法来显示HTML元素. 4通过 ...
- 用原生JS实现的一个导航下拉菜单，下拉菜单的宽度与浏览器视口的宽度一样（js+html+css）
这个导航下拉菜单需要实现的功能是:下拉菜单的宽度与浏览器视口的宽度一样宽:一级导航只有两项,当鼠标移到一级导航上的导航项时,相应的二级导航出现.在本案例中通过改变二级导航的高度来实现二级导航的显示和消 ...
- (实用篇)jQuery+PHP+MySQL实现二级联动下拉菜单
二级联动下拉菜单选择应用在在很多地方,比如说省市下拉联动,商品大小类下拉选择联动.本文将通过实例讲解使用jQuery+PHP+MySQL来实现大小分类二级下拉联动效果. 先看下效果 大类: 前端技术 ...
- JS列表的下拉菜单组件(仿美化控件select)
JS列表的下拉菜单组件(仿美化控件select) 2014-01-23 23:51 by 龙恩0707, 1101 阅读, 6 评论, 收藏, 编辑 今天是农历23 也是小年,在这祝福大家新年快乐!今 ...
- js导航下拉菜单
使用定时器.鼠标移动事件 var img = $('#user_head'); var menu = $('.nav_list'); var i=0; var timer; img.mouseente ...
- 兼容ie7的导航下拉菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jq+css+html简单实现导航下拉菜单
相信导航栏下拉菜单是web开发最常见的一个item了.这里就不做介绍了,直接上code. Html部分 <div class="_nav"> <ul id=&qu ...
- HTML DOM部分---做竖向横向的下拉导航 下拉菜单 图片轮播（圆点、箭头） 选项卡 进度条；
1,竖向下拉导航 鼠标单击打开 再打击关闭 <style> *{ margin:0px auto; padding:0px;} div{ width:100px; height:50px; ...
随机推荐
- SQL语句中=null和is null
平时经常会遇到这两种写法:IS NOT NULL与!=NULL.也经常会遇到数据库有符合条件!=NULL的数据,但是返回为空集合.实际上,是由于对二者使用区别理解不透彻. 默认情况下,推荐使用 IS ...
- maven 编译项目时：报com.sun.image.codec.jpeg不存在
项目中用到图片处理相关的一些工具类,在eclipse开发工具内,程序并没有什么问题,都可以正常使用,项目也没有报错,但通过maven 进行编译打包时,则会报错: 程序包com.sun.image.co ...
- Android 7.0 UICC 分析(四)
本文讲解SIMRecords /frameworks/opt/telephony/src/java/com/android/internal/telephony/uicc/SIMRecords.jav ...
- android隐藏底部虚拟键Navigation Bar实现全屏
隐藏底部虚拟键Navigation Bar实现全屏有两种情况 第一种:始终隐藏,触摸屏幕时也不出现 解决办法:同时设置以下两个参数 View.SYSTEM_UI_FLAG_HIDE_NAVIGATIO ...
- SQL 查询性能优化----解决书签查找
先来看看什么是书签查找: 当优化器所选择的非聚簇索引只包含查询请求的一部分字段时,就需要一个查找(lookup)来检索其他字段来满足请求.对一个有聚簇索引的表来说是一个键查找(key lookup), ...
- JSON 的应用
使用 JSON 需要的 jar 包:
- LSD-SLAM深入学习（4）-非ROS改造
前言 没错,距离上一次博客的发布已经俩月了,今天是圣诞节,圣诞快乐. 在前几篇中已经完成了ROS下面的一系列操作.如有任何问题,feel free to contact me at robotsmin ...
- 蚁群算法求解旅行商问题（附c和matlab源代码）
前几天写了个模拟退火算法的程序,然后又陆陆续续看了很多群智能算法,发现很多旅行商问题都采用蚁群算法来求解,于是开始写蚁群算法的模板.网上关于蚁群算法的理论很多就不再这里赘述了,下面直接上代码和进行简单 ...
- TCP3次握手和4次挥手
为什么握手是3次,挥手是4次? 因为握手的时候,ACK+SYN可以一起发送,而4次挥手是Server端发送对Client的FIN的ACK后不一定会立即断开连接,需要将ACK和FIN分开发送 为什么TI ...
- 全自动ARP实时绑定BAT文件
全自动ARP实时绑定BAT文件 说明一下,这个BVS脚本,它会每六秒钟清除一次ARP缓存.并绑定网关.真正做到了实时防护! 代码如下:请另存为.BAT文件.再运行一下,就可以了 path c:\;c: ...