以下是css编写的导航菜单，鼠标悬浮导航菜单后自动弹出二级菜单，因为需要我在一个子菜单中调用函数隐藏弹出的层（为了子菜单点击后不影响下方的图片），但当我再次把鼠标放到导航菜单上，二级菜单就不再弹出了，如何修改代码？
-----------以下为示例--------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<!---->
<style>
.Nav {
}
.Nav li{
float:left;
display:block;
position:relative;
}
.Nav a{
float:left;
display:block;
position:relative;
padding:2px 10px 2px 10px;
font-size:13px;
text-decoration: none;
}
.Nav li a:hover
{
color:#ffffff;
background:#ea0000;
}
.Nav li table {
display:none;
border-collapse:collapse;
}
.Nav li:hover table, .Nav a:hover table {
display:block;
position:absolute;
top:18px;
left:0;
background:#ea0000;
}
.Nav li:hover table a, .Nav a:hover table a {
float:none;
background:#f2f2f2;
color:#000;
width:120px;
border-bottom:1px solid #fff;
}
.Nav li:hover table a:hover, .Nav a:hover table a:hover {
background:#565656;
color:#fff;
}
</style>
<script language="javascript" type="text/javascript">
function OnclickLink()
{
document.getElementById("subnav").style.visibility="hidden";
}
</script>
<div class='Nav'>
<li>
<a href='#'>产品
<table id="subnav"><tr><td>
<a href='#1'onclick="OnclickLink();">产品1</a>
<a href='#2'>产品2</a>
</td></tr></table>
</a>
</li>
</div>
</BODY>
</HTML>
----------------------------