首页 > 代码库 > 纯css和js版下拉菜单
纯css和js版下拉菜单
<!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{width:550px; height:30px; background:#06F; margin:100px auto; line-height:30px; padding-left:10px; margin-bottom:0;}li{width: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{width: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=http://www.mamicode.com/"#">首页</a> <ul> <li><a href=http://www.mamicode.com/"#">二级菜单</a></li> <li><a href=http://www.mamicode.com/"#">二级菜单</a></li> <li><a href=http://www.mamicode.com/"#">二级菜单</a></li> <li><a href=http://www.mamicode.com/"#">二级菜单</a></li> </ul> </li> <li>网页设计 <ul> <li><a href=http://www.mamicode.com/"#">二级菜单</a></li> <li><a href=http://www.mamicode.com/"#">二级菜单</a></li> <li><a href=http://www.mamicode.com/"#">二级菜单</a></li> <li><a href=http://www.mamicode.com/"#">二级菜单</a></li> </ul> </li> <li>ui设计 <ul> <li><a href=http://www.mamicode.com/"#">二级菜单</a></li> <li><a href=http://www.mamicode.com/"#">二级菜单</a></li> <li><a href=http://www.mamicode.com/"#">二级菜单</a></li> <li><a href=http://www.mamicode.com/"#">二级菜单</a></li> </ul> </li> <li>动画设计 <ul> <li><a href=http://www.mamicode.com/"#">二级菜单</a></li> <li><a href=http://www.mamicode.com/"#">二级菜单</a></li> <li><a href=http://www.mamicode.com/"#">二级菜单</a></li> <li><a href=http://www.mamicode.com/"#">二级菜单</a></li> </ul> </li> <li>js特效 <ul> <li><a href=http://www.mamicode.com/"#">二级菜单</a></li> <li><a href=http://www.mamicode.com/"#">二级菜单</a></li> <li><a href=http://www.mamicode.com/"#">二级菜单</a></li> <li><a href=http://www.mamicode.com/"#">二级菜单</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{width:550px; height:30px; background:#06F; margin:100px auto; line-height:30px; padding-left:10px; margin-bottom:0;}li{width: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{width: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=http://www.mamicode.com/"#">首页</a> <ul> <li><a href=http://www.mamicode.com/"#">二级菜单</a></li> <li><a href=http://www.mamicode.com/"#">二级菜单</a></li> <li><a href=http://www.mamicode.com/"#">二级菜单</a></li> <li><a href=http://www.mamicode.com/"#">二级菜单</a></li> </ul> </li> <li>网页设计 <ul> <li><a href=http://www.mamicode.com/"#">二级菜单</a></li> <li><a href=http://www.mamicode.com/"#">二级菜单</a></li> <li><a href=http://www.mamicode.com/"#">二级菜单</a></li> <li><a href=http://www.mamicode.com/"#">二级菜单</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>
纯css和js版下拉菜单
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。