方法一：
<style type="text/css"> *{ margin:0px auto; padding:0px} #menu{ width:700px; height:40px; border:1px solid #999; margin-top:30px} .list{ width:100px; height:40px; text-align:center; line-height:40px; vertical-align:middle; font-size:16px; font-family:微软雅黑; float:left} .list:hover{ cursor:pointer; background-color:#63C; color:white} .ziwai{width:0px; height:0px;position:relative; float:left; top:40px; left:-100px} .zi{ width:100px; height:100px; background-color:#6C3; display:none } </style> <body> <div id="menu"> <div class='list' onmouseover="Show('z1')" onmouseout="YinCang()">首页</div> <div class="ziwai" > <div class="zi" id="z1"></div> </div> <div class='list' onmouseover="Show('z2')" onmouseout="YinCang()">产品介绍</div> <div class="ziwai" > <div class="zi" id="z2"></div> </div> <div class='list' onmouseover="Show('z3')" onmouseout="YinCang()">公司简介</div> <div class="ziwai" > <div class="zi" id="z3"></div> </div> <div class='list' onmouseover="Show('z4')" onmouseout="YinCang()">联系我们</div> <div class="ziwai" > <div class="zi" id="z4"></div> </div> <div class='list' onmouseover="Show('z5')" onmouseout="YinCang()">新闻动态</div> <div class="ziwai" > <div class="zi" id="z5"></div> </div> </div> </body> <script type="text/javascript"> function Show(id) { //让所有的子菜单隐藏 var attr = document.getElementsByClassName("zi"); for(var i=0; i<attr.length;i++) { attr[i].style.display = "none"; } //让和该菜单关联的子菜单显示 document.getElementById(id).style.display = "block"; } function YinCang() { var attr = document.getElementsByClassName("zi"); for(var i=0; i<attr.length;i++) { attr[i].style.display = "none"; } } </script>
但是这种方法存在BUG，当鼠标移动到弹出的DIV上时，下拉列表的显示效果会消失
方法二：
<style> .a { width:80px; height:40px; } #a { top:200px; left:200px; position:absolute; background-color:#33C; overflow:hidden;} .b { background-color:#FF0; width:80px; height:120px; top:40px; left:0px; position:absolute;} #b1{ background-color:#FC0; top:0px; left:0px; position:absolute; overflow:hidden;} #b2{ background-color:#F6C; top:40px; left:0px; position:absolute; overflow:hidden;} #b3{ background-color:#0F3; top:80px; left:0px; position:absolute; overflow:hidden;} </style> <body> <div class="a" id="a" onmouseover="over1()" onmouseout="out1()"> <div class="b"> <div class="a" id="b1" onmouseover="over2()" onmouseout="out2()"> <div style="background-color:#FC0; 80px; height:120px;top:0px; left:80px; position:absolute;"></div> </div> <div class="a" id="b2" onmouseover="over3()" onmouseout="out3()"> <div style="background-color:#F6C; 80px; height:120px;top:0px; left:80px; position:absolute;"></div> </div> <div class="a" id="b3" onmouseover="over4()" onmouseout="out4()"> <div style="background-color:#0F3; 80px; height:120px;top:0px; left:80px; position:absolute;"></div> </div> </div> </div> </body> <script type="text/javascript"> function over1() { var a = window.document.getElementById("a"); a.setAttribute("style","overflow:visible"); } function out1() { var a = window.document.getElementById("a"); a.setAttribute("style","overflow:hidden"); } function over2() { var a = window.document.getElementById("b1"); a.setAttribute("style","overflow:visible"); } function out2() { var a = window.document.getElementById("b1"); a.setAttribute("style","overflow:hidden"); } function over3() { var a = window.document.getElementById("b2"); a.setAttribute("style","overflow:visible"); } function out3() { var a = window.document.getElementById("b2"); a.setAttribute("style","overflow:hidden"); } function over4() { var a = window.document.getElementById("b3"); a.setAttribute("style","overflow:visible"); } function out4() { var a = window.document.getElementById("b3"); a.setAttribute("style","overflow:hidden"); }