为什么鼠标在移动最后一个二级菜单上就消失不见了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<style type="text/css">
*{border:1px solid red}
.menu_itme{ width:80px; padding-left:3px; background:#FFF; position:5px;}
.menu_itme ul li{ padding:0; padding-left:0px;}
.menu_itme ul li a{ display:block; width:80px; height:28px; background-color:#FFFFFF; line-height:28px; font-size:16px; font-weight:normal; text-indent:0.8em;}
.menu_itme ul li a:hover,.meuitemon{color:#FFFFFF;}.menu_itme_child{ width:8px; padding-left:11px;}
.menu_itme_child  li{ text-align:left; padding:0;}
.menu_itme_child  li a{ width:80px; font-size:16px;; background:#FFFFFF; overflow:hidden; text-decoration:none;}
.menu_itme_child  li a:hover{ background:#FFFFFF; color:#FFFFFF; }.childmenu{text-align:left; border-left:0px;}.childmenu ul li{ padding-left:0px; list-style-type:none;}
.childmenu ul li a{ width:250px; font-size:14px; background:#FFF; padding-left:0px; text-decoration:none;}
.childmenu li a:hover{ background:#6BB1F5; color:#FFF; }
</style>
</head>
<body>  
       <div class="menu_itme">        
            <ul  class="menu_itme_child">
              <li><a href="#" id="menu_zc"  >Solutions</a></li>
              <li><a href="#" id="menu_bmff"  >Software</a></li>
              <li><a href="#" id="menu_xxtj"  >Services</a></li>              
            </ul>
            <div id="menu_zc_1"  style="position:absolute; display:none"  class="childmenu" >
              <ul>
                <li><a href="#">Banking</a></li>
                <li><a href="#">Government</a></li>
                <li><a href="#">Education</a></li>
              </ul>
            </div>
            <div  id="menu_bmff_1"  style="position:absolute; display:none"  class="childmenu" >
              <ul>
                <li><a href="#">Content Collaboration</a></li>
                <li><a href="#">Real-Time Interactive Client Service</a></li>                
              </ul>
            </div>
            <div  id="menu_xxtj_1"  style="position:absolute; display:none"  class="childmenu" >
              <ul>
                <li><a href="#">Application Development Outsourcing</a></li>
                <li><a href="#">Application Assessment Outsourcing</a></li>
                <li><a href="#">Business Process</a></li>                
              </ul>
            </div>         
      </div>
</body>
<script type="text/javascript">
var time;
$(document).ready(function(){
  $("#menu_zc,#menu_bmff,#menu_xxtj").hover(function(){
 $(".childmenu").hide();
 $(".menu_itme_child li a").attr("style","background:#FFF;"); 
 if(time) clearTimeout(time);
 var that = $(this);
 var id = that.attr("id") + '_1';
     that.attr("style","background:#6BB1F5;"); 
 $("#"+id).show();
 var position = that.position();
 $("#"+id).css("left",'110px');
 $("#"+id).css("top",position.top+'px');
});

  $(".childmenu").hover(function(){
if(time) clearTimeout(time);
});
   
  $(".childmenu").mouseleave(function(){
$(".menu_itme_child li a").attr("style","background:#FFF;");    
$(".childmenu").hide();
});  
  $(".menu_itme_child li a").mouseleave(function(){
time = setTimeout(function(){
$(".menu_itme_child li a").attr("style","background:#FFF;"); 
$(".childmenu").hide();    
},500);
  });  
}); </script>
</html>