求助！我在鼠标滑过，显示二级导航菜单遇到的问题

我要实现鼠标经过菜单，显示出二级菜单的功能。我的html如下：

<script type="text/javascript" src="{dede:global.cfg_templets_skin/}/js/jquery.min.js"></script>



<script>	

$(document).ready(function() {

$("#navsub").hide();

$("#navsub2").hide();

	$("#kd").hover(

		function(){

			$("#navsub").show();

		},function(){

				$("#navsub").hide();

		}

	);



});

</script>

<div class="fw topNav">



	<div>



	<ul>



    	<li><a href="#" target="_self">首页</a></li>



        <li id="kd"><a href="#" target="_self">宽带业务</a>

			

		</li>

				



        <li id="gh" ><a href="#" target="_self">固话业务</a></li>



        <li ><a href="http://www.shanzhaiji.com/pingban/" target="_self">3G/4G</a></li>



        <li ><a href="http://www.shanzhaiji.com/pingce/" target="_self">促销活动</a></li>



        <li ><a href="http://www.shanzhaiji.com/hangqing/" target="_self">帮助与支持</a></li>

      </ul>

    </div>

</div>

<div class="fw NavSub">

	<ul><li></li></ul>

<ul id="navsub">

<li><a href="#">8M宽带</a>

<li>

<li><a href="#">12M宽带</a>

<li>

<li><a href="#">24M宽带</a>

<li>

<li><a href="#">互联网数据专线(DIA)</a>

<li>

<li>

</ul>

<ul id="navsub2">

<li><a href="#">400电话</a>

<li>

<li><a href="#">话务中心</a>

<li>

<li><a href="#">呼叫中心</a>

<li>

<li>

</ul>

<div>

<input name="" type="text" />

<input type="submit" name="Submit" value="搜索" />

</div>



</div>

如上图，我想要的功能是鼠标移动到某个菜单项，显示对应的二级菜单，现在的问题是，二级菜单显示出来后，鼠标还没有移动到二级菜单上，二级菜单就消失了。
这个是我业余时间搞点，我不是专业做这个的，请大家帮我一下，实现这个功能吧，我搞了一天了，实在是没办法了，谢谢。