2007 - 10 - 04
Published by 朝心
<!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" /> <meta name="Author" content="www.itroam.com" /> <title>经过修改无限级下拉菜单-可满足多种情况</title> <style> * { list-style-type: none; margin: 0px; padding: 0px; } body { margin: 7px; font:normal normal 12px/1.5em "Arial"; } #nav{font-size:0px;} #nav a{ font-size:12px; display:block; width: 100px; height: 20px; line-height:20px; padding:5px; border-bottom:1px solid #999; background: #666; color: #fff; text-decoration: none; } #nav a:hover {background: #333;} #nav li{width:110px;} #nav ul { position: absolute; display: none; margin-left:110px; margin-top: -32px; } #nav li.show ul {display: block;} #nav li.show li ul {display: none;} #nav li li.show ul {display: block;} /*有2级子菜单时样式*/ #nav ul li.hadChild a{ background:#f30; } </style> <script language="javascript" type="text/javascript"> function menuFix() { var sfEls = document.getElementById("nav").getElementsByTagName("li"); for(var i=0;i<sfEls.length;i++) { var ulss=sfEls[i].getElementsByTagName("ul"); if(ulss.length>0) { sfEls[i].className="hadChild"; } } 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="#">first nav</a> <ul> <li><a href="#">sec nav</a> <ul> <li><a href="#">third nav</a></li> <li><a href="#">third nav</a></li> </ul> </li> <li><a href="#">sec nav</a> <ul> <li><a href="#">third nav</a></li> <li><a href="#">third nav</a></li> <li><a href="#">third nav</a></li> <li><a href="#">third nav</a></li> <li><a href="#">third nav</a></li> <li><a href="#">third nav</a></li> <li><a href="#">third nav</a></li> <li><a href="#">third nav</a></li> <li><a href="#">third nav</a></li> <li><a href="#">third nav</a></li> </ul> </li> <li><a href="#">sec nav</a> <ul> <li><a href="#">third nav</a></li> <li><a href="#">third nav</a></li> <li><a href="#">third nav</a></li> <li><a href="#">third nav</a></li> <li><a href="#">third nav</a></li> <li><a href="#">third nav</a></li> <li><a href="#">third nav</a></li> <li><a href="#">third nav</a></li> <li><a href="#">third nav</a></li> <li><a href="#">third nav</a></li> <li><a href="#">third nav</a></li> <li><a href="#">third nav</a></li> </ul> </li> <li><a href="#">sec nav</a> <ul> <li><a href="#">third nav</a></li> <li><a href="#">third nav</a></li> <li><a href="#">third nav</a></li> <li><a href="#">third nav</a></li> <li><a href="#">third nav</a></li> <li><a href="#">third nav</a></li> </ul> </li> </ul> </li> <li><a href="#">first nav</a> <ul> <li><a href="#">sec nav</a></li> <li><a href="#">sec nav</a></li> <li><a href="#">sec nav</a></li> <li><a href="#">sec nav</a></li> <li><a href="#">sec nav</a></li> <li><a href="#">sec nav</a></li> </ul> </li> <li><a href="#">first nav</a> <ul> <li><a href="#">sec nav</a></li> <li><a href="#">sec nav</a></li> <li><a href="#">sec nav</a></li> <li><a href="#">sec nav</a></li> <li><a href="#">sec nav</a></li> <li><a href="#">sec nav</a></li> </ul> </li> </ul> </body> </html>
呵呵，帮你PP顶！也请来97bobo看看……
楼主你也太强了吧。。。继续支持下
我也来看看呢，兄弟加油啊文雀
我也来支持下
这个感觉很猛的。。支持下
貌似还可以
确实不错的说
我是来看看那的
Comments RSS
Name (必需)
Mail (hidden) (必需)
Website
呵呵，帮你PP顶！也请来97bobo看看……
楼主你也太强了吧。。。继续支持下
我也来看看呢，兄弟加油啊文雀
我也来支持下
这个感觉很猛的。。支持下
貌似还可以
确实不错的说
我是来看看那的