延迟的菜单

不多说，一看代码就清楚，这样不必一定要让两个层嵌套，两个层有一定的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>