<style type="text/css"> *{ margin:0px auto; padding:0px;font-family:微软雅黑} #wai{width:800px;height:50px;} .menu{width:100px;height:50px;float:left;text-align:center;vertical-align:middle;line-height:50px;border:1px solid #C36} .erji{width:0px;height:0px;float:left;position:relative;top:52px;left:-102px;display:none} .two{width:100px;height:200px;background-color:#C33;border:1px solid #C36} #nr{width:100%;height:500px;background-color:#C66} </style> </head> <body> <div id="wai"> <div class="menu">首页</div> <div class="erji"> <div class="two"></div> </div> <div class="menu">产品中心</div> <div class="erji"> <div class="two"></div> </div> <div class="menu">新闻动态</div> <div class="erji"> <div class="two"></div> </div> <div class="menu">联系我们</div> <div class="erji"> <div class="two"></div> </div> <div class="menu">关于我们</div> <div class="erji"> <div class="two"></div> </div> </div> <div id="nr"></div> <script type="text/javascript"> var menu = document.getElementsByClassName("menu"); for(var i=0;i<menu.length;i++){ menu[i].onmouseover = function(){ this.nextSibling.nextSibling.style.display = "block"; } } for(var i=0;i<menu.length;i++){ menu[i].onmouseout = function(){ this.nextSibling.nextSibling.style.display = "none"; } } </script> </body> </html>
