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 相关文章推荐
收藏Javascript中常用的55个经典技巧
Aug 12 Javascript
原生javascript 学习之js变量全面了解
Jul 14 Javascript
JavaScript正则表达式实例详解
Oct 16 Javascript
JS匿名函数类生成方式实例分析
Nov 26 Javascript
微信小程序 图片边框解决方法
Jan 16 Javascript
JSONP基础知识详解
Mar 19 Javascript
微信小程序 连续旋转动画(this.animation.rotate)详解
Apr 07 Javascript
详解vue-cli本地环境API代理设置和解决跨域
Sep 05 Javascript
使用ESLint禁止项目导入特定模块的方法步骤
Mar 04 Javascript
react 中父组件与子组件双向绑定问题
May 20 Javascript
layer弹出层倒计时关闭的实现方法
Sep 27 Javascript
JavaScript判断浏览器版本的方法
Nov 03 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页面间传递值和保持值的方法
2016/08/24 PHP
Ubuntu VPS中wordpress网站打开时提示”建立数据库连接错误”的解决办法
2016/11/03 PHP
yii2 上传图片的示例代码
2018/11/02 PHP
JavaScript中“基本类型”之争小结
2013/01/03 Javascript
VS2008中使用JavaScript调用WebServices
2014/12/18 Javascript
JavaScript中setFullYear()方法的使用详解
2015/06/11 Javascript
通用javascript代码判断版本号是否在版本范围之间
2015/11/29 Javascript
基于jquery实现页面滚动到底自动加载数据的功能
2015/12/19 Javascript
JS根据浏览器窗口大小实时动态改变网页文字大小的方法
2016/02/25 Javascript
原生JS实现-星级评分系统的简单实例
2016/08/21 Javascript
JS实现旋转木马式图片轮播效果
2017/01/18 Javascript
jQuery图片切换动画效果
2017/02/28 Javascript
又一款MVVM组件 构建自己的Vue组件(2)
2017/03/13 Javascript
Vue.js数据绑定之data属性
2017/07/07 Javascript
JS实现电商放大镜效果
2017/08/24 Javascript
Layer弹出层动态获取数据的方法
2018/08/20 Javascript
JS字典Dictionary类定义与用法示例
2019/02/01 Javascript
前端天气插件tpwidget使用方法详解
2019/06/24 Javascript
微信小程序学习总结(二)样式、属性、模板操作分析
2020/06/04 Javascript
python2.7删除文件夹和删除文件代码实例
2013/12/18 Python
Django中实现一个高性能计数器(Counter)实例
2014/07/09 Python
matplotlib在python上绘制3D散点图实例详解
2017/12/09 Python
Python中elasticsearch插入和更新数据的实现方法
2018/04/01 Python
Python smtplib实现发送邮件功能
2018/05/22 Python
Python判断变量名是否合法的方法示例
2019/01/28 Python
Python 3.8新特征之asyncio REPL
2019/05/28 Python
wxPython修改文本框颜色过程解析
2020/02/14 Python
Python基于模块Paramiko实现SSHv2协议
2020/04/28 Python
Spring @Enable模块驱动原理及使用实例
2020/06/23 Python
CSS3中:nth-child和:nth-of-type的区别深入理解
2014/03/10 HTML / CSS
哥伦比亚加拿大官网:Columbia Sportswear Canada
2020/09/07 全球购物
新加坡第一的杂货零售商:NTUC FairPrice
2020/12/05 全球购物
大学生毕业自我评价范文分享
2013/11/11 职场文书
顶岗实习计划书
2014/01/10 职场文书
国际会计专业求职信
2014/08/04 职场文书
2015年学雷锋活动总结
2015/02/06 职场文书