鼠标经过，显示子菜单，ie8 不兼容的问题。

<div id="nav" class="layout fn-clear">
<ul class="fn-clear">
<li><a href="#" title="父栏目" target="_blank">父栏目</a>
<ul class="sub-menu" style="display:none;padding:0;margin:0">
<li><a href="#" title="子栏目1" target="_blank">子栏目1</a></li>
<li><a href="#" title="子栏目2" target="_blank">子栏目2</a></li>
</ul>
</li>
<ul>
</div>


css代码如下：
#nav{
height:43px;
}
#nav li{
position:relative;
float:left;
display:inline;
text-align:center;
font:normal 14px/43px Arial, Helvetica, sans-serif;
}
#nav li a{display:block; width:100px; height:43px; overflow:hidden; float:left; }
#nav li.has-sub{
background:url(img/nav-sel.png) no-repeat center 0;
}
#nav .sub-menu{
width:100px;
position:absolute;
top:43px;
left:0;
z-index:100;
}
#nav .sub-menu li{
display:block;
height:31px;
width:100px;
overflow:hidden;
line-height:30px;
width:100%;
background:rgba(0,133,218,0.8);
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#CC0085DA', EndColorStr='#CC0085DA');
}
#nav li a{color:#fff;}
#nav .sub-menu li a{ height:30px; width:100px;
border-bottom:1px solid #FFF; }

js代码如下：
$("#nav>ul>li").each(function(index){
var hasSub = $(this).children("ul").length>0;
if(hasSub){
$(this).hover(function(e){
$(this).addClass("has-sub");
$(this).children("ul").slideDown(200);
},function(e){
$(this).removeClass("has-sub");
$(this).children("ul").stop().slideUp(200);
});
}

});


现在的问题是这样的：

鼠标放在父栏目上面，显示其子栏目。然后可以选择子栏目。但是ie8出现的效果是：从父栏目上面移到子栏目上的时候，子菜单消失了。