juqery hover做的菜单延时问题


.MenuContent ul{ margin:0; width:927px; height:25px; padding:0; }
.MenuContent ul li{color:#9D9D9D; float:left;  height:15px; width:50px; margin-right:15px;}
 .MenuContent ul li ul{ top:510px; margin:0; height:15px; width:180px; position:absolute; left:140px;  }
.MenuContent ul li ul li{color:#9D9D9D; float:left; height:15px; width:50px;   }
.MenuContent ul li  ul li ul{  height:15px; margin:0; margin:0; padding:0; width:300px;position:absolute; left:5px; top:20px;}
.MenuContent ul li  ul li  ul li{color:#9D9D9D; float:left;  height:15px; width:50px;}$(document).ready(function () { 
var mouseover_tid = [];
var mouseout_tid = []
//$("#Menu .MenuContent").fadeIn(3000);
$("#menu_li").each(function(index){
   $(this).hover(function(){ //二级菜单
   var _self = this;
   clearTimeout(mouseout_tid[index]);
   mouseover_tid[index] = setTimeout(function(){
    $("#menu_li008").show(1000);
$("#menu_li001").show(1000);

         },400);
      },
   function(){
   var _self = this;
clearTimeout(mouseover_tid[index]);
mouseout_tid[index] = setTimeout(function() {
    $("#menu_li008").hide(2000);
$("#menu_li001").hide(2000);
      },400);
   }
);
 
    $("#menu_li001").hover(function(){ //三级菜单
  var _self = this;
  clearTimeout(mouseout_tid[index]);
     mouseover_tid[index] = setTimeout(function(){
  $("#menu_ul002").fadeIn(1000);
},400);
   },
 function(){
 var _self = this;
clearTimeout(mouseover_tid[index]);
mouseout_tid[index] = setTimeout(function() {
          $("#menu_ul002").fadeOut(1000);
             },400);
       }
   );});
});
 <div id="Menu">
    <div class="MenuImg"> <img src="images/menu_arrow_20.gif" /> </div>
    <div class="MenuContent" >
      <!-- MenuList-->
      <ul>
        <li><a href="#">首&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;页</a></li>
        <li id="menu_li"><a  href="#" >随唐品牌</a>
 
          <ul id="menu_ul001"  >
            <li id="menu_li001" style=" display:none;"><a href="#">走近隆唐</a>              <ul id="menu_ul002" style="display:none;">
                <li><a href="#">品牌定位</a></li>
 <li><a href="#">品牌定位</a></li>
  <li><a href="#">品牌定位</a></li>
             </ul>
            </li>
            <li id="menu_li008" style="display:none;"><a href="#">隆唐创意</a></li>
          </ul>
        </li>
        <li><a href="#">网上展厅</a></li>
        <li><a href="#">量身御制</a></li>
        <li><a href="#">臻品礼品</a></li>
        <li><a href="#">传媒资讯</a></li>
        <li  style="border: none"><a href="#">华服论坛</a></li>
      </ul>
    </div>
    <div class="clear"> </div>
  </div>
我这里是用jquery中的hover来做一个水平横向多级菜单导航
li下我放的是一个ul，ul会和li宽度起冲突，我就用绝对定位来控制ul
然后要考虑到hover这个函数的特殊性，我用到了延时，二级菜单是可以正常实现，但是在三级菜单时发现不好使，哪位帮忙看看