JS延迟导航nav

HTML:

<ul id="ul1">
    <li>
        1111111
        <div>1111111111</div>
    </li>
    <li>
        2222222
        <div>222222222</div>
    </li>
    <li>
        3333333
        <div>3333333</div>
    </li>
    <li>
        4444444
        <div>4444444</div>
    </li>
    <li>
        555555
        <div>555555</div>
    </li>
</ul>

CSS：

*{margin:0;padding:0;list-style:none;}
#ul1{width:200px;background:#ccc; border:1px solid #000;}
#ul1 li{ position:relative;width:200px; height:50px; line-height:50px; text-align:center; border-bottom:1px solid #000;}
#ul1 li div{ display:none; position:absolute;left:210px; top:0; width:500px; height:400px; background:#ccc; border:1px solid #000;}

JS:

window.onload = function(){
    var oUl = document.getElementById("ul1");
    var aLi = oUl.getElementsByTagName("li");
    var aDiv = oUl.getElementsByTagName("div");
    
    var timer = null;
    for(var i = 0; i < aLi.length; i++){
        aLi[i].onmouseover = function(){
            clearTimeout(timer);
            var _this = this;
            timer = setTimeout(function(){
                
                //清空所有样式
                for(var i = 0; i < aDiv.length; i++){
                    aDiv[i].style.display = "none";
                }
                
                var oDiv = _this.getElementsByTagName("div")[0];
                oDiv.style.display = "block";
            },500);    
        };
        
        aLi[i].onmouseout = function(){
            clearTimeout(timer);
            var _this = this;
            timer = setTimeout(function(){
                var oDiv = _this.getElementsByTagName("div")[0];
                oDiv.style.display = "none";
            },500);        
        };
    }
};