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 相关文章推荐
AJAX使用了UpdatePanel后无法使用alert弹出脚本
Apr 02 Javascript
javascript:void(0)是什么意思示例介绍
Nov 17 Javascript
javascript事件模型实例分析
Jan 30 Javascript
60行js代码实现俄罗斯方块
Mar 31 Javascript
JS基于FileSystemObject创建一个指定路径的TXT文本文件
Aug 05 Javascript
最简单的JavaScript图片轮播代码(两种方法)
Dec 18 Javascript
JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)
Mar 25 Javascript
jquery模拟多级复选框效果的简单实例
Jun 08 Javascript
ES6字符串模板,剩余参数,默认参数功能与用法示例
Apr 06 Javascript
JQuery EasyUI的一些常用组件
Jul 12 jQuery
jQuery Form插件使用详解_动力节点Java学院整理
Jul 17 jQuery
通过实例讲解JS如何防抖动
Jun 15 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
浅析PKI加密解密 OpenSSL
2013/07/01 PHP
Jquery跨域获得Json时invalid label错误的解决办法
2011/01/11 Javascript
JS字符串函数扩展代码
2011/09/13 Javascript
formStorage 基于jquery的一个插件(存储表单中元素的状态到本地)
2012/01/20 Javascript
jquery图片延迟加载 前端开发技能必备系列
2012/06/18 Javascript
jquery下拉select控件操作方法分享(jquery操作select)
2014/03/25 Javascript
JavaScript将字符串转换成字符编码列表的方法
2015/03/19 Javascript
jQuery的load()方法及其回调函数用法实例
2015/03/25 Javascript
原生js结合html5制作小飞龙的简易跳球
2015/03/30 Javascript
jQuery实现的导航下拉菜单效果
2016/07/04 Javascript
jquery-mobile基础属性与用法详解
2016/11/23 Javascript
JavaScript实现图片懒加载(Lazyload)
2016/11/28 Javascript
jquery Ajax 全局调用封装实例详解
2017/01/16 Javascript
canvas实现探照灯效果
2017/02/07 Javascript
TypeScript类型声明书写详解
2019/08/28 Javascript
layui 实现加载动画以及非真实加载进度的方法
2019/09/23 Javascript
Vue 如何使用props、emit实现自定义双向绑定的实现
2020/06/05 Javascript
Python cookbook(数据结构与算法)将序列分解为单独变量的方法
2018/02/13 Python
Python的numpy库中将矩阵转换为列表等函数的方法
2018/04/04 Python
python实现梯度下降算法
2020/03/24 Python
python3字符串操作总结
2019/07/24 Python
使用OpenCV circle函数图像上画圆的示例代码
2019/12/27 Python
Python通过正则库爬取淘宝商品信息代码实例
2020/03/02 Python
Python semaphore evevt生产者消费者模型原理解析
2020/03/18 Python
python如何实时获取tcpdump输出
2020/09/16 Python
python修改微信和支付宝步数的示例代码
2020/10/12 Python
CSS3 text-shadow实现文字阴影效果
2016/02/24 HTML / CSS
英国时尚服饰电商:Boohoo
2017/10/12 全球购物
ASOS亚洲:ASOS Asia
2018/03/04 全球购物
Skyscanner香港:机票比价, 平机票和廉价航空机票预订
2020/02/07 全球购物
CHRONEXT英国:您的首选奢华腕表目的地
2020/03/30 全球购物
祖国在我心中的演讲稿
2014/05/04 职场文书
高三励志标语
2014/06/05 职场文书
大学社团招新的通讯稿
2014/09/10 职场文书
幼儿园家长心得体会
2016/01/21 职场文书
MySQL控制流函数(-if ,elseif,else,case...when)
2022/07/07 MySQL