简单的JQ显示与隐藏问题

我想实现二级菜单的显示与隐藏，为啥二级总哆嗦呢？有时候还没等鼠标移到上面就没了.求改进方法。刚学JQ还不太熟，呵呵
代码：
<!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=gb2312" />
<title>d</title><style type="text/css">
.header{
width:1001px;
height:36px;
min-height:36px !important;
background:url(images/bg02.gif) repeat-x;
position:absolute;
}
.has_children{
width:110px;
float:left;
text-align:center;
margin:0;
padding:0;
min-height:36px;
border:solid 1px red;
}
a.fnt_a{color:#FFFFFF;}

.has_children a{
display:block;
text-decoration:none;
}
a.nav1{
font-size:16px;
color:#333333;
font-weight:bold;
height:36px;
line-height:36px;
}
a.nav2{
font-size:12px;
height:25px;
line-height:25px;
color:white;
}
a.nav2:hover{
background:#0066CC;
}

</style>
<script src="http://www.w3school.com.cn/jquery/jquery.js"></script>
<script>
$(function(){
$('.nav2').hide();
$('.has_children').mouseover(function(){
$(this).css({'background':'#2D63AD'})
.children('.nav1').css({'color':'white'}).end()
.children('.nav2').show('fast').end();
}).mouseout(function(){
$(this).css({'background':''})
.children('.nav1').css({'color':'#333333'}).end()
.children('.nav2').hide().end();
});
});
</script>
</head><body bgcolor="#bbbbbb">
<table width=1001 border=0 cellspacing=0 cellpadding=0 align=center>
<tr>
  <td height="36" style="position:relative;" valign="top">
<div class="header">
<div class="has_children">
<a href="" class="nav1">首页</a>
</div>
<div class="has_children">
<a href="" class="nav1">足球赛事</a>
<a href="" class="nav2">足足足事</a>
<a href="" class="nav2">足事事足事</a>
</div>
<div class="has_children">
<a href="" class="nav1">为神马</a>
<a href="" class="nav2">晕晕晕。。</a>
<a href="" class="nav2">足sdsd事</a>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>这里有可运行的页面：
http://bbs.blueidea.com/thread-3042537-1-1.html
顺便问下咱这可以插入可直接运行的代码吗？