Javascript +CSS横向三级导航菜单

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>

上一篇：CSS网页制作时实现自动换行的小技巧下一篇：[原文翻译]样式表编写效率手册