Javascript +CSS横向三级导航菜单

| 网站首页 | 模板 | 资料 | 源码 | 工具 | 开发 | 设计 | 安全 | 项目 | 网络 | 图片 | 系统 | 数据库 | 博客 | 会员中心 | 小说 |

网络学院

学习资料

源码模版

您现在的位置：精品下载 >> 开发 >> 网站开发 >> CSS技术 >> 文章正文

用户登录

新用户注册

Javascript +CSS横向三级导航菜单

【字体：小大】

Javascript +CSS横向三级导航菜单

作者：佚名文章来源：不详点击数：更新时间：2007-12-18

nav item.
- nav item.
  - nav item.
  - nav item.
- nav item.
  - nav item
  - nav item
  - nav item
  - nav item
  - nav item
  - nav item
  - nav item
  - nav item
  - nav item
  - nav item
- nav item.
  - nav item
  - nav item
  - nav item
  - nav item
  - nav item
  - nav item
  - nav item
  - nav item
  - nav item
  - nav item
  - nav item
  - nav item
- nav item.
  - nav item
  - nav item
  - nav item
  - nav item
  - nav item
  - nav item
nav item.
- nav item
- nav item
- nav item
- nav item
- nav item
- nav item
nav item.
- nav item
- nav item
- nav item
- nav item
- nav item
- nav item

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> ĵ</title> <style> body { margin: 7px; font:12px Verdana, Arial, Helvetica, sans-serif; } * { list-style-type: none; margin: 0px; padding: 0px; border: thin none; } #nav { position: absolute; font-size: 9px; opacity: 0.8; } #nav a { display: block; width: 100px; height: 15px; padding: 3px 5px 12px; background: #666; color: #fff; text-decoration: none; } #nav a:hover { background: #333; } #nav li { width: 120px; height:30px; overflow:hidden; background: #ccc; padding-bottom: 3px; } #nav ul { position: absolute; margin-left: 110px; margin-top: -30px; } html>body #nav ul { margin-left: 119px; margin-top: -39px; } #nav ul { display: none; } #nav li.show ul { display: block; } #nav li.show li ul { display: none; } #nav li li.show ul { display: block; } </style> <script language="javascript" type="text/javascript"> function menuFix() { var sfEls = document.getElementById("nav").getElementsByTagName("li"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=(this.className.length>0? " ": "") + "show"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp("( ?|^)show\\b"), ""); } } } window.onload=menuFix; </script> </head> <body> <ul id="nav"> <li><a href="#">nav item</a>. <ul> <li><a href="#">nav item</a>. <ul> <li><a href="#">nav item</a>.</li> <li><a href="#">nav item</a>.</li> </ul> </li> <li><a href="#">nav item</a>. <ul> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> </ul> </li> <li><a href="#">nav item</a>. <ul> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> </ul> </li> <li><a href="#">nav item</a>. <ul> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> </ul> </li> </ul> </li> <li><a href="#">nav item</a>. <ul> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> </ul> </li> <li><a href="#">nav item</a>. <ul> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> </ul> </li> </ul> </body> </html>

文章录入：chqnet 责任编辑：chqnet

上一篇文章： CSS网页制作时实现自动换行的小技巧

下一篇文章： CSS基础：CSS2盒模型

【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】

最新热点		最新推荐		相关文章
				在CSS样式表里使用JavaScrip Dreamweaver CS3 Beta界面功 CSS+JavaScript打造超酷右键从GMail认识的W3C网页标准和 WEB开发框架JACKER探讨(一) 实例详解CSS滤镜(9)Wave属性在DreamWeaver中应用CSS样式新手解读：认识XML，AJAX，S CSS:font-variant CSS+JavaScript打造超酷右键

　网友评论：（只显示最新10条。评论内容只代表网友观点，与本站立场无关！）