关于 鼠标上去就显示菜单，离开就隐藏菜单的问题

我是从网上找了一个别人做好的，但是有个问题，就是当鼠标移上去之后 子菜单在父菜单旁边出现，但是当我把鼠标想移动到子菜单时  由于子菜单和和父菜单之间有空隙，每次移动到空隙部分，子菜单就消失了。除非你的动作很快才能把鼠标移过去。我参考过别人做的网站。别人好像把子菜单的一部分放到父菜单的上面，这样一来由于子菜单和父菜单没有空隙所以，不会出现上面所说的问题。但是我不知道该怎么把 子菜单和父菜单重叠起来请各位 帮忙想个办法吧。。谢谢这是我这部分代码<SCRIPT   language=javascript>
  function   out()   
  {   
  if(window.event.toElement.id!="menu"&&window.event.toElement.id!="link")   
      menu.style.visibility="hidden";   
  }       
  
   
</SCRIPT>       
  <div   id="back"   onmouseout="out()"style="position:absolute;top:180;left:310;width:160;height:40;z-index:10;">   
  <span   id="menubar"     onmouseover="menu.style.visibility='visible'">   
  <font     color=red   size=2>菜单</span>   
  <div   border="1"     id="menu"   style="position:absolute;top:100;left:100;width:100;height:100;z-index:2;visibility:hidden;">   
  <a   id="link"   href="rjxz.htm">软件下载</a>   
  <a   id="link"   href="yxxz.htm">游戏下载</a>   
  <a   id="link"   href="hjsj.htm">黄金书籍</a>   
  <a   id="link"   href="mntk.htm">美女图库</a>   
  <a   id="link"   href="mp3.htm">MP3金曲</a>   
  <a   id="link"   href="flash.htm">FLASH</a>   
  </div>   
  </div>