jquery 无限下拉菜单演示
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="jquery.js"/></script> <title>无限级下拉菜单</title> <style type="text/css"> .hide{ display:none; } #nav {width:1000px; margin:0 auto; position:relative; background:#CCC;} #nav ul{margin:0px; padding:0px; list-style:none; background:#666;} #nav>ul{width:100%;} .meau1{width:200px;display:inline-block;float:left;} #nav>ul>li>ul{position:absolute;} #content{width:1000px;margin:0 auto; clear:both;} .meau3{padding-left:60px;} </style> <script language="javascript"> $(function(){ $("li").hover(function(){ $(this).children('.hide').show(); },function(){ $(this).children('.hide').hide(); }) }) </script> </head> <body> <div id="nav"> <ul> <li class="meau1"> <span>一级菜单</span> <ul class="hide"> <li class="meau2"> <span>二级菜单</span> <ul class="hide"> <li class="meau3"> <span>三级菜单</span> </li> </ul> </li> <li class="meau2"> <span>二级菜单</span> <ul class="hide"> <li class="meau3"> <span>三级菜单</span> </li> <li class="meau3"> <span>三级菜单</span> </li> <li class="meau3"> <span>三级菜单</span> </li> <li class="meau3"> <span>三级菜单</span> </li> </ul> </li> <li class="meau2"> <span>二级菜单</span> <ul class="hide"> <li class="meau3"> <span>三级菜单</span> </li> </ul> </li> <li class="meau2"> <span>二级菜单</span> <ul class="hide"> <li class="meau3"> <span>三级菜单</span> </li> </ul> </li> </ul> </li> <li class="meau1"> <span>一级菜单</span> <ul class="hide"> <li class="meau2"> <span>二级菜单</span> <ul class="hide"> <li class="meau3"> <span>三级菜单</span> </li> </ul> </li> <li class="meau2"> <span>二级菜单</span> <ul class="hide"> <li class="meau3"> <span>三级菜单</span> </li> <li class="meau3"> <span>三级菜单</span> </li> <li class="meau3"> <span>三级菜单</span> </li> <li class="meau3"> <span>三级菜单</span> </li> </ul> </li> <li class="meau2"> <span>二级菜单</span> <ul class="hide"> <li class="meau3"> <span>三级菜单</span> </li> </ul> </li> <li class="meau2"> <span>二级菜单</span> <ul class="hide"> <li class="meau3"> <span>三级菜单</span> </li> </ul> </li> </ul> </li> <li class="meau1"> <span>一级菜单</span> <ul class="hide"> <li class="meau2"> <span>二级菜单</span> <ul class="hide"> <li class="meau3"> <span>三级菜单</span> </li> </ul> </li> <li class="meau2"> <span>二级菜单</span> <ul class="hide"> <li class="meau3"> <span>三级菜单</span> </li> <li class="meau3"> <span>三级菜单</span> </li> <li class="meau3"> <span>三级菜单</span> </li> <li class="meau3"> <span>三级菜单</span> </li> </ul> </li> <li class="meau2"> <span>二级菜单</span> <ul class="hide"> <li class="meau3"> <span>三级菜单</span> </li> </ul> </li> <li class="meau2"> <span>二级菜单</span> <ul class="hide"> <li class="meau3"> <span>三级菜单</span> </li> </ul> </li> </ul> </li> <li class="meau1"> <span>一级菜单</span> <ul class="hide"> <li class="meau2"> <span>二级菜单</span> <ul class="hide"> <li class="meau3"> <span>三级菜单</span> </li> </ul> </li> <li class="meau2"> <span>二级菜单</span> <ul class="hide"> <li class="meau3"> <span>三级菜单</span> </li> <li class="meau3"> <span>三级菜单</span> </li> <li class="meau3"> <span>三级菜单</span> </li> <li class="meau3"> <span>三级菜单</span> </li> </ul> </li> <li class="meau2"> <span>二级菜单</span> <ul class="hide"> <li class="meau3"> <span>三级菜单</span> </li> </ul> </li> <li class="meau2"> <span>二级菜单</span> <ul class="hide"> <li class="meau3"> <span>三级菜单</span> </li> </ul> </li> </ul> </li> <li class="meau1"> <span>一级菜单</span> <ul class="hide"> <li class="meau2"> <span>二级菜单</span> <ul class="hide"> <li class="meau3"> <span>三级菜单</span> </li> </ul> </li> <li class="meau2"> <span>二级菜单</span> <ul class="hide"> <li class="meau3"> <span>三级菜单</span> </li> <li class="meau3"> <span>三级菜单</span> </li> <li class="meau3"> <span>三级菜单</span> </li> <li class="meau3"> <span>三级菜单</span> </li> </ul> </li> <li class="meau2"> <span>二级菜单</span> <ul class="hide"> <li class="meau3"> <span>三级菜单</span> </li> </ul> </li> <li class="meau2"> <span>二级菜单</span> <ul class="hide"> <li class="meau3"> <span>三级菜单</span> </li> </ul> </li> </ul> </li> </ul> </div> <div id="content">这里还有元素</div> </body> </html>
如果想用一句javascript实现更多功能的话，html树写规范对它有很大的影响。
