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中的对象和数组的应用技巧
Jan 07 Javascript
实现51Map地图接口(示例代码)
Nov 22 Javascript
JavaScript实现的图像模糊算法代码分享
Apr 22 Javascript
JavaScript实现网页截图功能
Oct 16 Javascript
Node.js静态文件服务器改进版
Jan 10 Javascript
jQuery动态添加及删除表单上传元素的方法(附demo源码下载)
Jan 15 Javascript
JavaScript数据结构之二叉查找树的定义与表示方法
Apr 12 Javascript
开发用到的js封装方法(20种)
Oct 12 Javascript
在JavaScript中如何访问暂未存在的嵌套对象
Jun 18 Javascript
Vue混入mixins滚动触底的方法
Nov 22 Javascript
Vue常用传值方式、父传子、子传父及非父子实例分析
Feb 24 Javascript
javascript 数组精简技巧小结
Feb 26 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怎样调用MSSQL的存储过程
2006/10/09 PHP
php中处理模拟rewrite 效果
2006/12/09 PHP
mysql5的sql文件导入到mysql4的方法
2008/10/19 PHP
php中FTP函数ftp_connect、ftp_login与ftp_chmod用法
2014/11/18 PHP
php递归调用删除数组空值元素的方法
2015/04/28 PHP
php 升级到 5.3+ 后出现的一些错误,如 ereg(); ereg_replace(); 函数报错
2015/12/07 PHP
PHP编程计算文件或数组中单词出现频率的方法
2017/05/22 PHP
javascript TextArea动态显示剩余字符
2008/10/22 Javascript
jquery $(&quot;#variable&quot;) 循环改变variable的值示例
2014/02/23 Javascript
用jQuery实现的智能隐藏、滑动效果的返回顶部代码
2014/03/18 Javascript
js返回前一页刷新本页重载页面
2014/07/29 Javascript
js拆分字符串并将分割的数据放到数组中的方法
2015/05/06 Javascript
js简单实现Select互换数据的方法
2015/08/17 Javascript
jquery实现简单的全选和反选功能
2016/01/02 Javascript
【JS+CSS3】实现带预览图幻灯片效果的示例代码
2016/03/17 Javascript
Actionscript与javascript交互实例程序(修改)
2016/09/22 Javascript
微信和qq时间格式模板实例详解
2016/10/21 Javascript
微信小程序 安全包括(框架、功能模块、账户使用)详解
2017/01/16 Javascript
详解jquery选择器的原理
2017/08/01 jQuery
jquery点击回车键实现登录效果并默认焦点的方法
2018/03/09 jQuery
python中关于日期时间处理的问答集锦
2013/03/08 Python
Python设计模式编程中Adapter适配器模式的使用实例
2016/03/02 Python
Django Admin实现上传图片校验功能
2016/03/06 Python
python实现黑客字幕雨效果
2018/06/21 Python
python 产生token及token验证的方法
2018/12/26 Python
Python爬虫Scrapy框架CrawlSpider原理及使用案例
2020/11/20 Python
详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐)
2020/11/16 HTML / CSS
HTML5注册页面示例代码
2014/03/27 HTML / CSS
采购部岗位职责
2013/11/24 职场文书
护理专科自荐书范文
2014/02/18 职场文书
平安工地建设方案
2014/05/06 职场文书
廉洁自律承诺书2015
2015/01/22 职场文书
工作调动申请报告
2015/05/18 职场文书
第二次离婚起诉书
2015/05/18 职场文书
电影建国大业观后感
2015/06/01 职场文书
导游词之南京莫愁湖公园
2019/11/13 职场文书