css结合js制作下拉菜单示例代码


Posted in Javascript onFebruary 27, 2014
<%@page pageEncoding="utf-8" 
contentType="text/html;charset=utf-8" %> <HTML> 
<HEAD> 
<title>WebForm5</title> 
<style>/* Root = Horizontal, Secondary = Vertical */ 
ul#navmenu-h { 
margin: 0; 
border: 0 none; 
padding: 0; 
width: 500px; /*For KHTML*/ 
list-style: none; 
height: 24px; 
} 
ul#navmenu-h li { 
margin: 0; 
border: 0 none; 
padding: 0; 
float: left; /*For Gecko*/ 
display: inline; 
list-style: none; 
position: relative; 
height: 24px; 
} 
ul#navmenu-h ul { 
margin: 0; 
border: 0 none; 
padding: 0; 
width: 160px; 
list-style: none; 
display: none; 
position: absolute; 
top: 24px; 
left: 0; 
} 
ul#navmenu-h ul:after /*From IE 7 lack of compliance*/{ 
clear: both; 
display: block; 
font: 1px/0px serif; 
content: "."; 
height: 0; 
visibility: hidden; 
} 
ul#navmenu-h ul li { 
width: 160px; 
float: left; /*For IE 7 lack of compliance*/ 
display: block !important; 
display: inline; /*For IE*/ 
} 
/* Root Menu */ 
ul#navmenu-h a { 
border: 1px solid #FFF; 
border-right-color: #CCC; 
border-bottom-color: #CCC; 
padding: 0 6px; 
float: none !important; /*For Opera*/ 
float: left; /*For IE*/ 
display: block; 
background: #EEE; 
color: #666; 
font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif; 
text-decoration: none; 
height: auto !important; 
height: 1%; /*For IE*/ 
} 
/* Root Menu Hover Persistence */ 
ul#navmenu-h a:hover, 
ul#navmenu-h li:hover a, 
ul#navmenu-h li.iehover a { 
background: #CCC; 
color: #FFF; 
} 
/* 2nd Menu */ 
ul#navmenu-h li:hover li a, 
ul#navmenu-h li.iehover li a { 
float: none; 
background: #EEE; 
color: #666; 
} 
/* 2nd Menu Hover Persistence */ 
ul#navmenu-h li:hover li a:hover, 
ul#navmenu-h li:hover li:hover a, 
ul#navmenu-h li.iehover li a:hover, 
ul#navmenu-h li.iehover li.iehover a { 
background: #CCC; 
color: #FFF; 
} 
/* 3rd Menu */ 
ul#navmenu-h li:hover li:hover li a, 
ul#navmenu-h li.iehover li.iehover li a { 
background: #EEE; 
color: #666; 
} 
/* 3rd Menu Hover Persistence */ 
ul#navmenu-h li:hover li:hover li a:hover, 
ul#navmenu-h li:hover li:hover li:hover a, 
ul#navmenu-h li.iehover li.iehover li a:hover, 
ul#navmenu-h li.iehover li.iehover li.iehover a { 
background: #CCC; 
color: #FFF; 
} 
/* 4th Menu */ 
ul#navmenu-h li:hover li:hover li:hover li a, 
ul#navmenu-h li.iehover li.iehover li.iehover li a { 
background: #EEE; 
color: #666; 
} 
/* 4th Menu Hover */ 
ul#navmenu-h li:hover li:hover li:hover li a:hover, 
ul#navmenu-h li.iehover li.iehover li.iehover li a:hover { 
background: #CCC; 
color: #FFF; 
} 
ul#navmenu-h ul ul, 
ul#navmenu-h ul ul ul { 
display: none; 
position: absolute; 
top: 0; 
left: 160px; 
} 
/* Do Not Move - Must Come Before display:block for Gecko */ 
ul#navmenu-h li:hover ul ul, 
ul#navmenu-h li:hover ul ul ul, 
ul#navmenu-h li.iehover ul ul, 
ul#navmenu-h li.iehover ul ul ul { 
display: none; 
} 
ul#navmenu-h li:hover ul, 
ul#navmenu-h ul li:hover ul, 
ul#navmenu-h ul ul li:hover ul, 
ul#navmenu-h li.iehover ul, 
ul#navmenu-h ul li.iehover ul, 
ul#navmenu-h ul ul li.iehover ul { 
display: block; 
} 
</style><script language="javascript"> 
navHover = function() { 
var lis = document.getElementById("navmenu-h").getElementsByTagName("LI"); 
for (var i=0; i<lis.length; i++) { 
lis[i].onmouseover=function() { 
this.className+=" iehover"; 
} 
lis[i].onmouseout=function() { 
this.className=this.className.replace(new RegExp(" iehover\\b"), 
""); 
} 
} 
} 
if (window.attachEvent) window.attachEvent("onload", navHover); 
</script> 
</HEAD> 
<body> 
<ul id="navmenu-h"> 
<li><a href="#">Root nav item1</a> 
<ul> 
<li><a href="#">Sub nav item1</a></li> 
<li><a href="#">Sub nav item1-2</a></li> 
</ul> 
</li> 
<li><a href="#">Root nav item2</a> 
<ul> 
<li><a href="#">Sub nav item2</a></li> 
<li><a href="#">Sub nav item2-2</a></li> 
</ul> 
</li> 
<li><a href="#">Root nav item3</a> 
<ul> 
<li><a href="#">Sub nav item3</a></li> 
<li><a href="#">Sub nav item3-2</a></li> 
</ul> 
</li> 
</ul> 
</body> 
</html>
Javascript 相关文章推荐
游戏人文件夹程序 ver 4.03
Jul 14 Javascript
JavaScript学习笔记(十七)js 优化
Feb 04 Javascript
十个优秀的Ajax/Javascript实例网站收集
Mar 31 Javascript
jquery里的each使用方法详解
Dec 22 Javascript
jquery库文件略庞大用纯js替换jquery的方法
Aug 12 Javascript
JavaScript中操作字符串小结
May 04 Javascript
js 判断所选时间(或者当前时间)是否在某一时间段的实现代码
Sep 05 Javascript
js获取当前日期时间及其它日期操作汇总
Mar 08 Javascript
Vue.js组件tabs实现选项卡切换效果
Dec 01 Javascript
Bootstrap3多级下拉菜单
Feb 24 Javascript
使用 Vue.js 仿百度搜索框的实例代码
May 09 Javascript
JavaScript引用类型之基本包装类型实例分析【Boolean、Number和String】
Aug 09 Javascript
js function定义函数的几种不错方法
Feb 27 #Javascript
window.open 以post方式传递参数示例代码
Feb 27 #Javascript
jQuery之ajax删除详解
Feb 27 #Javascript
jQuery之字体大小的设置方法
Feb 27 #Javascript
jquery validate 自定义验证方法介绍 日期验证
Feb 27 #Javascript
jQuery Validate 验证,校验规则写在控件中的具体实例
Feb 27 #Javascript
jquery退出each循环的写法
Feb 26 #Javascript
You might like
php+ajax制作无刷新留言板
2015/10/27 PHP
php微信开发接入
2016/08/27 PHP
Laravel框架基于ajax和layer.js实现无刷新删除功能示例
2019/01/17 PHP
php简单计算权重的方法示例【适合抽奖类应用】
2019/06/10 PHP
JS网络游戏-(模拟城市webgame)提供的一些例子下载
2007/10/14 Javascript
腾讯UED 漂亮的提示信息效果代码
2011/09/12 Javascript
用JQuery实现全选与取消的两种简单方法
2014/02/22 Javascript
js加入收藏夹代码(兼容ie/ff/op)
2014/05/16 Javascript
使用angular写一个hello world
2015/01/23 Javascript
深入理解JavaScript系列(48):对象创建模式(下篇)
2015/03/04 Javascript
JS在浏览器中解析Base64编码图像
2017/02/09 Javascript
GOJS+VUE实现流程图效果
2018/12/01 Javascript
[55:54]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python使用SocketServer模块编写基本服务器程序的教程
2016/07/12 Python
python简单贪吃蛇开发
2019/01/28 Python
jupyter notebook读取/导出文件/图片实例
2020/04/16 Python
Spring @Enable模块驱动原理及使用实例
2020/06/23 Python
Python实现小黑屋游戏的完整实例
2021/01/06 Python
详解Html5 Canvas画线有毛边解决方法
2018/03/01 HTML / CSS
北美三大旅游网站之一:Travelocity加拿大
2016/08/20 全球购物
经济实惠的豪华背包和行李袋:Packs Project
2018/10/17 全球购物
Richards网上商店:当代时尚,遍布巴西
2019/11/03 全球购物
文秘大学生求职信
2014/02/25 职场文书
行政人事经理职位说明书
2014/03/05 职场文书
家长写给老师的建议书
2014/03/13 职场文书
2014年清明节网上祭英烈寄语
2014/04/09 职场文书
教师竞聘演讲稿
2014/05/16 职场文书
2014年应急管理工作总结
2014/11/26 职场文书
音乐教师个人总结
2015/02/06 职场文书
求职推荐信范文
2015/03/27 职场文书
廉洁自律心得体会2016
2016/01/13 职场文书
2016道德模范先进事迹材料
2016/02/26 职场文书
详解Redis基本命令与使用场景
2021/06/01 Redis
mysql 8.0.27 绿色解压版安装教程及配置方法
2022/04/20 MySQL
Vue3实现简易音乐播放器组件
2022/08/14 Vue.js
MySQL下载安装配置详细教程 附下载资源
2022/09/23 MySQL