<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>
![](https://images2017.cnblogs.com/blog/1283297/201712/1283297-20171211162044430-1714182121.png)