<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>横向下拉菜单</title> <style> #menu{ width:100%; background:#000; } #nav{ background-color:#000; width:880px; height:30px; margin:0px auto; } #nav li{float:left;list-style:none;} #nav li a{ display:block; width:110px; height:30px; line-height:30px; list-style:none; text-align:center; } a{text-decoration:none;color:#fff;font-weight:bold;} a:hover{ background:#ccc; } ul,li{ margin:0px;padding:0px; } #nav li .show{ position:absolute; background:#000; } #nav li .show li{ float:none; position:relatvie; list-style:none; } </style> </head> <body> <div id="menu"> <ul id="nav"> <li> <a href="">网站首页</a> <ul></ul> </li> <li> <a href="">关于我们</a> <ul style="display:none;"> <li><a href="">公司简介</a></li> <li><a href="">公司资讯</a></li> <li><a href="">董事长致辞</a></li> </ul> </li> <li> <a href="">新闻中心</a> <ul style="display:none;"> <li><a href="">企业新闻</a></li> <li><a href="">企业公告</a></li> <li><a href="">世界新闻</a></li> </ul> </li> <li > <a href="">产品展示</a> <ul style="display:none;"> <li><a href="">笔记本电脑</a></li> <li><a href="">智能手机</a></li> <li><a href="">iPhone5</a></li> </ul> </li> <li> <a href="">案例展示</a> <ul style="display:none;"> <li><a href="">笔记本电脑</a></li> <li><a href="">智能手机</a></li> <li><a href="">iPhone5</a></li> </ul> </li> <li> <a href="">人才招聘</a> <ul style="display:none;"> <li><a href="">笔记本电脑</a></li> <li><a href="">智能手机</a></li> <li><a href="">iPhone5</a></li> </ul> </li> <li> <a href="">客户留言</a> <ul style="display:none;"> <li><a href="">笔记本电脑</a></li> <li><a href="">智能手机</a></li> <li><a href="">iPhone5</a></li> </ul> </li> <li> <a href="">联系我们</a> <ul style="display:none;"> <li><a href="">笔记本电脑</a></li> <li><a href="">智能手机</a></li> <li><a href="">iPhone5</a></li> </ul> </li> </ul> </div> <div id="test"> 测试是否成功测试是否成功测试是否成功测试是否成功测试是否成功测试是否成功测试是否成功测试是否成功测试是否成功测试是否成功测试是否成功测试是否成功测试是否成功测试是否成功测试是否成功 </div> <script> var nav=document.getElementById("nav"); //获得所有子节点(元素节点，文本节点，属性节点...等等) var liList=nav.childNodes; //循环遍历所有节点 for(var i=0;i<liList.length;i++){ //判断是否是元素节点 if(liList[i].nodeType==1){ liList[i].onmouseover=function(){ var ulOne=this.getElementsByTagName("ul")[0]; ulOne.style.display="block"; ulOne.className="show"; } liList[i].onmouseout=function(){ var ulOne=this.getElementsByTagName("ul")[0]; ulOne.style.display="none"; } } } </script> </body> </html>
必须注意的一点是这里的定位：
#nav li .show{
position:absolute;
background:#000;
}
#nav li .show li{
float:none;
position:relatvie;
list-style:none;
}