<!doctype html> <html> <head> <meta charset="utf-8"> <title>css版下拉菜单</title> <style type="text/css"> div,body,ul,li{padding:0;margin:0; list-style:none;} .all{550px; height:30px; background:#06F; margin:100px auto; line-height:30px; padding-left:10px; margin-bottom:0;} li{100px; height:30px; background:#ccc; float:left; text-align:center; margin-right:10px; cursor:pointer; position:relative; _display:inline;} ul ul li{color:red;} ul ul{position:absolute; left:0; top:30px; display:none;} .ceshi{800px; height:100px; background:gold; margin:0 auto;} .all li:hover ul{display:block;}//ie6死了，可以正大光明不考虑兼容问题了，可以放心使用伪类了 </style> </head> <body> <div class="all"> <ul> <li><a href="#">首页</a> <ul> <li><a href="#">二级菜单</a></li> <li><a href="#">二级菜单</a></li> <li><a href="#">二级菜单</a></li> <li><a href="#">二级菜单</a></li> </ul> </li> <li>网页设计 <ul> <li><a href="#">二级菜单</a></li> <li><a href="#">二级菜单</a></li> <li><a href="#">二级菜单</a></li> <li><a href="#">二级菜单</a></li> </ul> </li> <li>ui设计 <ul> <li><a href="#">二级菜单</a></li> <li><a href="#">二级菜单</a></li> <li><a href="#">二级菜单</a></li> <li><a href="#">二级菜单</a></li> </ul> </li> <li>动画设计 <ul> <li><a href="#">二级菜单</a></li> <li><a href="#">二级菜单</a></li> <li><a href="#">二级菜单</a></li> <li><a href="#">二级菜单</a></li> </ul> </li> <li>js特效 <ul> <li><a href="#">二级菜单</a></li> <li><a href="#">二级菜单</a></li> <li><a href="#">二级菜单</a></li> <li><a href="#">二级菜单</a></li> </ul> </li> </ul> </div> <div class="ceshi">测试用</div> </body> </html>
<!doctype html> <html> <head> <meta charset="utf-8"> <title>js版下拉菜单</title> <style type="text/css"> div,body,ul,li{padding:0;margin:0; list-style:none;} .all{550px; height:30px; background:#06F; margin:100px auto; line-height:30px; padding-left:10px; margin-bottom:0;} li{100px; height:30px; background:#ccc; float:left; text-align:center; margin-right:10px; cursor:pointer; position:relative; _display:inline;} ul ul li{color:red;} ul ul{position:absolute; left:0; top:30px; display:none;} .ceshi{800px; height:100px; background:gold; margin:0 auto;} </style> <script> window.onload=function() { var oMenu=document.getElementById('menu'); var aLi=oMenu.children; var aUl=oMenu.getElementsByTagName('ul'); for(var i=0;i<aLi.length;i++) { aLi[i].index=i; aLi[i].onmouseover=function() { for(var i=0;i<aUl.length;i++)//首先是先排除再选择自己 { aUl[i].style.display='none'; } aUl[this.index].style.display='block'; } aLi[i].onmouseout=function() { for(var i=0;i<aUl.length;i++) { aUl[i].style.display='none'; } } } }; </script> </head> <body> <div class="all"> <ul id="menu"> <li><a href="#">首页</a> <ul> <li><a href="#">二级菜单</a></li> <li><a href="#">二级菜单</a></li> <li><a href="#">二级菜单</a></li> <li><a href="#">二级菜单</a></li> </ul> </li> <li>网页设计 <ul> <li><a href="#">二级菜单</a></li> <li><a href="#">二级菜单</a></li> <li><a href="#">二级菜单</a></li> <li><a href="#">二级菜单</a></li> </ul> </li> <li>ui设计 <ul> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> </ul> </li> <li>动画设计 <ul> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> </ul> </li> <li>js特效 <ul> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> </ul> </li> </ul> </div> <div class="ceshi">测试用</div> </body> </html>