不多说，一看代码就清楚，这样不必一定要让两个层嵌套，两个层有一定的margin也是可以的!
<!doctype html>
<html>
<head>
<title></title>
<style>
#div1{50px;height:49px;background:#999;float:left;margin-right:20px;}
#div2{150px;height:149px;background:#ccc;float:left;display:none;}
</style>
<script type="text/javascript">
window.onload = function(){
var oDiv1 = document.getElementById("div1");
var oDiv2 = document.getElementById("div2");
var timer = null;
oDiv1.onmouseover = oDiv2.onmouseover = function(){ // 两个层的mouverover 事件实际要实现的效果是一样的，就是让让菜单层显示。
oDiv2.style.display = "block";
clearInterval(timer);//清除定时器，不让菜单隐藏
};
oDiv1.onmouseout = oDiv2.onmouseout = function(){//两个层的mouseout 事件也是一样的，就是开个定时器在一段时间后让菜单隐藏，
timer = setTimeout(function(){
oDiv2.style.display = "none";
},500);
};
};
</script>
</head>
<body>
<div id="div1">
</div>
<div id="div2">
</div>
</body>
</html>