注册
登录
标签
在线时间兑换积分
帮助
精品酷站论坛
»
CSS代码交流
» 实用无限级菜单
‹‹ 上一主题
|
下一主题 ››
发新话题
发布投票
发布商品
发布悬赏
发布活动
发布辩论
发布视频
打印
实用无限级菜单
tension
管理员
个人空间
发短消息
加为好友
当前离线
1
#
大
中
小
发表于 2008-2-5 21:46
只看该作者
实用无限级菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title> 哈喽 </title> <style> #nav, #nav ul {padding:0 0 5px 0; margin:0; list-style:none; font: 10px verdana, sans-serif; border:1px solid #000; border-color:#eca #b97 #a86 #edb; border-width:1px 2px 2px 1px; background:#fff; position:relative; z-index:200;} #nav {height:25px; padding:0;} #nav li {float:left;} #nav li li {float:none; background:#fff;} * html #nav li li {float:left;} #nav li a {display:block; float:left; color:#888; margin:0 25px 0 10px; height:25px; line-height:25px; text-decoration:none; white-space:nowrap;} #nav li li a {height:20px; line-height:20px; float:none;} #nav li:hover {position:relative; z-index:300;} #nav li:hover ul {left:0; top:22px;} * html #nav li:hover ul {left:10px;} #nav ul {position:absolute; left:-9999px; top:-9999px;} * html #nav ul {width:1px;} #nav li:hover li:hover > ul {left:-15px; margin-left:100%; top:-1px;} #nav li:hover > ul ul {position:absolute; left:-9999px; top:-9999px; width:auto;} #nav li:hover > a {text-decoration:underline; color:#b75;} #nav li:hover li:hover ul, #nav li:hover li:hover li:hover ul, #nav li:hover li:hover li:hover li:hover ul, #nav li:hover li:hover li:hover li:hover li:hover ul {left:-15px; margin-left:100%; top:-1px;} #nav li:hover ul ul, #nav li:hover li:hover ul ul, #nav li:hover li:hover li:hover ul ul, #nav li:hover li:hover li:hover li:hover ul ul {position:absolute; left:-9999px; top:-9999px;} #nav li:hover a, #nav li:hover li:hover a, #nav li:hover li:hover li:hover a, #nav li:hover li:hover li:hover li:hover a, #nav li:hover li:hover li:hover li:hover li:hover a, #nav li:hover li:hover li:hover li:hover li:hover li:hover a {text-decoration:underline; color:#b75;} #nav li:hover li a, #nav li:hover li:hover li a, #nav li:hover li:hover li:hover li a, #nav li:hover li:hover li:hover li:hover li a, #nav li:hover li:hover li:hover li:hover li:hover li a {text-decoration:none; color:#888;} </style> </head> <body> <h1> </h1> <script type="text/javascript"> stuHover = function() { var
css
Rule; var newSelector; for (var i = 0; i < document.styleSheets.length; i++) for (var x = 0; x < document.styleSheets[i].rules.length ; x++) {
css
Rule = document.styleSheets[i].rules[x]; if (
css
Rule.selectorText.indexOf("LI:hover") != -1) { newSelector =
css
Rule.selectorText.replace(/LI:hover/gi, "LI.iehover"); document.styleSheets[i].addRule(newSelector ,
css
Rule.style.
css
Text); } } var getElm = document.getElementById("nav").getElementsByTagName("LI"); for (var i=0; i<getElm.length; i++) { getElm[i].onmouseover=function() { this.className+=" iehover"; } getElm[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" iehover\\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", stuHover); </script> <ul id="nav"> <li><a href="#nogo">Home</a></li> <li><a href="#nogo">About us »</a> <ul> <li><a href="#nogo">Who we are</a></li> <li><a href="#nogo">What we do</a></li> <li><a href="#nogo">Where to find us</a></li> </ul> </li> <li><a href="#nogo">Products »</a> <ul> <li><a href="#nogo">Tripods »</a> <ul> <li><a href="#nogo">Monopods</a></li> <li><a href="#nogo">Tripods</a></li> <li><a href="#nogo">Adjutable head</a></li> <li><a href="#nogo">Fixed</a></li> <li><a href="#nogo">Flash mount</a></li> <li><a href="#nogo">Floating head</a></li> </ul> </li> <li><a href="#nogo">Films »</a> <ul> <li><a href="#nogo">35mm</a></li> <li><a href="#nogo">Color Print</a></li> <li><a href="#nogo">Black and White</a></li> <li><a href="#nogo">Roll</a></li> <li><a href="#nogo">Color Slide</a></li> </ul> </li> <li><a href="#nogo">Cameras »</a> <ul> <li><a href="#nogo">Compact »</a> <ul> <li><a href="#nogo">Canon</a></li> <li><a href="#nogo">Nikon</a></li> <li><a href="#nogo">Minolta</a></li> <li><a href="#nogo">Pentax</a></li> </ul> </li> <li><a href="#nogo">Digital »</a> <ul> <li><a href="#nogo">Canon</a></li> <li><a href="#nogo">Nikon »</a> <ul> <li><a href="#nogo">Lenses »</a> <ul> <li><a href="#nogo">Standard</a></li> <li><a href="#nogo">Telephoto</a></li> <li><a href="#nogo">Wide Angle</a></li> <li><a href="#nogo">Fish Eye</a></li> <li><a href="#nogo">Mirror</a></li> <li><a href="#nogo">Macro</a></li> </ul> </li> <li><a href="#nogo">Speedlight</a></li> <li><a href="#nogo">Coolpix »</a> <ul> <li><a href="#nogo">Coolpix S10</a></li> <li><a href="#nogo">Coolpix L2</a></li> <li><a href="#nogo">Coolpix S500</a></li> <li><a href="#nogo">Coolpix P5000</a></li> <li><a href="#nogo">Coolpix 4600</a></li> <li><a href="#nogo">Coolpix S6 Silver</a></li> </ul> </li> <li><a href="#nogo">D200</a></li> <li><a href="#nogo">D80</a></li> </ul> </li> <li><a href="#nogo">Minolta</a></li> <li><a href="#nogo">Pentax</a></li> </ul> </li> <li><a href="#nogo">SLR »</a> <ul> <li><a href="#nogo">Canon</a></li> <li><a href="#nogo">Nikon</a></li> <li><a href="#nogo">Minolta</a></li> <li><a href="#nogo">Pentax</a></li> <li><a href="#nogo">Panasonic</a></li> </ul> </li> </ul> </li> <li><a href="#nogo">Flash</a></li> <li><a href="#nogo">Video</a></li> </ul> </li> <li><a href="#nogo">FAQs »</a> <ul> <li><a href="#nogo">Cameras</a></li> <li><a href="#nogo">Film types</a></li> <li><a href="#nogo">Digital Photography</a></li> </ul> </li> <li><a href="#nogo">Privacy »</a> <ul> <li><a href="#nogo">Privacy Policy</a></li> <li><a href="#nogo">Privacy Statement</a></li> </ul> </li> <li><a href="#nogo">Contact us</a></li> </ul> <p> </p> </body> </html>
提示:您可以先修改部分代码再运行
UID
1
帖子
736
精华
25
积分
1913
阅读权限
200
在线时间
18 小时
注册时间
2007-5-26
最后登录
2008-11-29
查看详细资料
TOP
‹‹ 上一主题
|
下一主题 ››
设计人
插画
网页设计
摄影图片
平面设计
设计师加油
站务区
站务管理
娱乐其他
智力游戏
投资理财
娱乐时尚
IT风向标
社会新闻
灌水专区
娱乐八卦
资源共享区
酷站资源
提交酷站
PS笔刷/样式/滤镜&插件
开源软件
免费资源区
实用软件/手册
代码交流区
WEB2.0 / AJAX
ASP,PHP,JSP...
JS,UI框架开发
JQuery
mootools
ProtoType
DHTML eXtensions
CSS代码交流
控制面板首页
编辑个人资料
积分记录
公众用户组
个人空间管理
基本概况
版块排行
主题排行
发帖排行
积分排行
交易排行
在线时间
管理团队
393张高清晰web2.0站点截图
425款精品毛笔墨迹+38款墨迹底纹..
10位Master级别的Photoshop高手
绝对漂亮的笔刷
Soul 近期新作品欣赏..
熟女养成日志—长草
魔幻抽象/吸血鬼传说!!
photoshop仿CG滤镜
新手必看:积分、资源币、人民币、用户级别、发贴教程
设计QQ群:31195683