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 相关文章推荐
JS类定义原型方法的两种实现的区别评论很多
Sep 12 Javascript
firefox火狐浏览器与与ie兼容的2个问题总结
Jul 20 Javascript
js监控IE火狐浏览器关闭、刷新、回退、前进事件
Jul 23 Javascript
javascript顺序加载图片的方法
Jul 18 Javascript
jQuery EasyUI菜单与按钮详解
Jul 13 Javascript
使用JavaScript生成罗马字符的实例代码
Jun 08 Javascript
vue中使用protobuf的过程记录
Oct 26 Javascript
react koa rematch 如何打造一套服务端渲染架子
Jun 26 Javascript
微信小程序实现定位及到指定位置导航的示例代码
Aug 20 Javascript
JS实现json数组排序操作实例分析
Oct 28 Javascript
微信小程序按顺序同步执行的两种方式
Dec 20 Javascript
浅谈Vue使用Elementui修改默认的最快方法
Dec 05 Vue.js
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
python进程与线程小结实例分析
2018/11/11 PHP
使用laravel根据用户类型来显示或隐藏字段
2019/10/17 PHP
js 返回时间戳所对应的具体时间
2010/07/20 Javascript
js使下拉列表框可编辑不止是选择
2013/12/12 Javascript
JavaScript面向对象编程入门教程
2014/04/16 Javascript
javascript实现3D切换焦点图
2015/10/16 Javascript
JS常见疑难点分析之match,charAt,charCodeAt,map,search用法分析
2016/12/25 Javascript
原生js实现轮播图的示例代码
2017/02/20 Javascript
JS中使用 after 伪类清除浮动实例
2017/03/01 Javascript
easyUI下拉列表点击事件使用方法
2017/05/18 Javascript
AngularJS表单验证功能分析
2017/05/26 Javascript
原生JavaScript实现的简单省市县三级联动功能示例
2017/05/27 Javascript
详解node.js中的npm和webpack配置方法
2018/01/21 Javascript
Angular4 ElementRef的应用
2018/02/26 Javascript
vue使用ajax获取后台数据进行显示的示例
2018/08/09 Javascript
使用layui的router来进行传参的实现方法
2019/09/06 Javascript
如何在微信小程序中存setStorage
2019/12/13 Javascript
Vant picker 多级联动操作
2020/11/02 Javascript
Vue实现手机号、验证码登录(60s禁用倒计时)
2020/12/19 Vue.js
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
2021/01/22 Vue.js
使用python实现扫描端口示例
2014/03/29 Python
Python读取txt文件数据的方法(用于接口自动化参数化数据)
2018/06/27 Python
tensorflow模型保存、加载之变量重命名实例
2020/01/21 Python
Python ORM编程基础示例
2020/02/02 Python
python字符串下标与切片及使用方法
2020/02/13 Python
什么是SQL Server的确定性函数和不确定性函数
2016/08/04 面试题
Structs界面控制层技术
2013/10/11 面试题
美发店5.1活动方案
2014/01/24 职场文书
珍惜资源保护环境的建议书
2014/05/14 职场文书
民族团结演讲稿范文
2014/08/27 职场文书
金融保险专业求职信
2014/09/03 职场文书
大学生英文求职信范文
2015/03/19 职场文书
工作表现证明
2015/06/15 职场文书
物业管理交接协议书
2016/03/24 职场文书
python图像处理基本操作总结(PIL库、Matplotlib及Numpy)
2021/06/08 Python
python处理json数据文件
2022/04/11 Python