子菜单下拉
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> *{ margin:0px auto; padding:0px;} #items{760px; height:50px;} .itema{ 150px; height:50px; background-color:#666; border-right:1px solid #000; float:left; color:#fff; text-align:center; line-height:50px; vertical-align:middle} .itema:hover{ cursor:pointer} .hid{ 0px; height:0px; float:left; position:relative; top:50px; left:-150px} .hid1{ 150px; height:50px; line-height:50px; vertical-align:middle; text-align:center; background-color:#0F0} </style> </head> <body> <div id="items"> <div class="itema">产品详情</div> <div class="hid" style=" display:none"> //做一个0大小的div <div class="hid1">123</div> <div class="hid1">123</div> <div class="hid1">123</div> </div> <div class="itema">新闻中心</div> <div class="hid" style=" display:none"> <div class="hid1">123</div> <div class="hid1">123</div> <div class="hid1">123</div> </div> <div class="itema">公司动态</div> <div class="hid" style=" display:none"> <div class="hid1">123</div> <div class="hid1">123</div> <div class="hid1">123</div> </div> <div class="itema">关于我们</div> <div class="hid" style=" display:none"> <div class="hid1">123</div> <div class="hid1">123</div> <div class="hid1">123</div> </div> <div class="itema">联系我们</div> <div class="hid" style=" display:none"> <div class="hid1">123</div> <div class="hid1">123</div> <div class="hid1">123</div> </div> </div> </body> </html> <script type="text/javascript"> var itema = document.getElementsByClassName("itema") for(var i=0;i<itema.length;i++) { itema[i].onmouseover = function() { this.nextSibling.nextSibling.style.display = "block"; } } //鼠标移上时，展开 for(var i=0;i<itema.length;i++) { itema[i].onmouseout = function(){ this.nextSibling.nextSibling.style.display = "none"; } } //鼠标移出时，收回 </script>
效果图：
