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

[bwt009]

我要实现鼠标经过菜单，显示出二级菜单的功能。我的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>

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

[bwt009]

高手在哪里，快点来帮哦我一下啊。

[highnewrain]

可以不用javascript；给你个用css实现的例子参考：

<!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>
<style type="text/css">
a{
	color:#FFF;
	text-decoration:none;
}
.first,.second
{
	list-style:none;
}
.first>li
{
	float:left;
}
.second
{
	padding:0px;
}
.first>li>a
{
	background:grey;
	color:#FFF;
	margin-left:1px;
	width:100px;
	padding-top:10px;
	padding-bottom:10px;
	text-align:center;
	display:block;
}
.first>li:hover>a
{
	background:blue;
}
.first>li:hover ul>li>a
{
	display:block;
}
.second>li>a
{
	width:100px;
	background:blue;
	padding-top:10px;
	padding-bottom:10px;
	padding-left:0px;
	margin-top:1px;
	margin-left:0px;
	text-align:center;
	display:none;
}
.second>li>a:hover
{
	color:#CC6600;
}
</style>
</head>
<ul class="first">
	<li>
		<a href="javascript:void(0)">固话业务</a>
		<ul class="second">
			<li><a href="javascript:void(0)">400电话</a></li>
			<li><a href="javascript:void(0)">401电话</a></li>
			<li><a href="javascript:void(0)">402电话</a></li>
		</ul>
	</li>
	<li>
		<a href="javascript:void(0)">宽带业务</a>
		<ul class="second">
			<li><a href="javascript:void(0)">8兆宽带</a></li>
			<li><a href="javascript:void(0)">16兆宽带</a></li>
			<li><a href="javascript:void(0)">24兆宽带</a></li>
		</ul>
	</li>
	<li>
		<a href="javascript:void(0)">帮助与支持</a>
	</li>
</ul>
<body>
</body>
</html>

效果如下图：

[初心不变时过迁]

顶2楼 css问题

[初心不变时过迁]

准确的说是 CSS和HTML