레이어를 써서 서브메뉴를 만들고 있는데 서브메뉴가 다른 주메류에 롤오버시에만 사라집니다.

예를들어 커뮤니티메뉴 롤오버시 나오는서브메뉴로 내용일부가 가려지는 문제가 있더군요.

다른 메뉴로 롤오버될시에만 기존에 펼쳐진 서브메뉴가 사라지는데 서브메뉴(레이어)영역을 마우스가 벗어나도 감추게 하려면 어떻게 해야 하나요.

말로 설명하려니 에매하네요...

지금보니 그누사이트가 제가 원하는 스타일이네요...상단 메뉴부분을 그누처럼 하려면.... 좀 알려주세요.


제가 사용한 메뉴소스....
===============================

<style type="text/css">
<!-- 상단메뉴 레이어 테이블 시작 시작 -->
<!--
.submenu {  font-family: "굴림"; font-size: 12px; color: #666666; text-decoration: none ; line-height: 18px}
a:hover {  color: ff6600; text-decoration: none}
-->
</style>
<script language="JavaScript">
<!--
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
// -->

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_showHideLayers() { //v3.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v='hide')?'hidden':v; }
    obj.visibility=v; }
}
//-->
</script>


<div id="navi" style="position:absolute; left:170px; top:50px; width:550px; height:180px; z-index:1">


<div id="menu1" style="width:110px; height:110px; position:absolute; left:0px; top:49px; z-index:1; FILTER: alpha(opacity=85);; visibility: hidden">
<table width="110" border="0" cellspacing="1" cellpadding="0" height="80" bgcolor="dcdcde" name="menu2">
<tr>
<td bgcolor="#FFFFFF" valign="middle">
<table width="103" border="0" cellspacing="0" cellpadding="0" align="right">
<tr>
<td valign="top">
<a href="#" class="submenu">프린터</a><br>
<a href="#" class="submenu">잉크</a><br>
<a href="#" class="submenu">무한필?</a><br>
<a href="#" class="submenu">프리필?</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>

<div id="menu2" style="width:110px; height:110px; position:absolute; left:109px; top:49px; z-index:2; FILTER: alpha(opacity=85);; visibility: hidden">
<table width="110" border="0" cellspacing="1" cellpadding="0" height="62" bgcolor="dcdcde" name="menu2">
<tr>
<td bgcolor="#FFFFFF" valign="middle">
<table width="103" border="0" cellspacing="0" cellpadding="0" align="right">
<tr>
<td valign="top">
<a href="#" class="submenu">EPSON</a><br>
<a href="#" class="submenu">HP</a><br>
<a href="#" class="submenu">CANON</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>

<div id="menu3" style="width:110px; height:110px; position:absolute; left:218px; top:49px; z-index:3; FILTER: alpha(opacity=85);; visibility: hidden">
<table width="110" border="0" cellspacing="1" cellpadding="0" height="116" bgcolor="dcdcde" name="menu3">
<tr>
<td bgcolor="#FFFFFF" valign="middle">
<table width="103" border="0" cellspacing="0" cellpadding="0" align="right">
<tr>
<td valign="top">
<a href="#" class="submenu">EPSON</a><br>
<a href="#" class="submenu">HP</a><br>
<a href="#" class="submenu">주변기기</a><br>
<a href="#" class="submenu">FAQ</a><br>
<a href="#" class="submenu">기술자료</a><br>
<a href="#" class="submenu">다운로드</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>

<div id="menu4" style="width:160; height:110px; position:absolute; left:327px; top:49px; z-index:4; FILTER: alpha(opacity=85);; visibility: hidden">
<table width="160" border="0" cellspacing="1" cellpadding="0" height="206" bgcolor="dcdcde" name="menu4">
<tr>
<td bgcolor="#FFFFFF" valign="middle">
<table width="153" border="0" cellspacing="0" cellpadding="0" align="right">
<tr>
<td valign="top">
<a href="#" class="submenu">전문가 리뷰</a><br>
<a href="#" class="submenu">필드테스트-슈퍼포토잉크</a><br>
<a href="#" class="submenu">필드테스트-용지+프로파일</a><br>
<a href="#" class="submenu">필드테스트-카드리더기</a><br>
<a href="#" class="submenu">필드테스트-플래시메모리</a><br>
<a href="#" class="submenu">필드테스트-무선광마우스</a><br>
<a href="#" class="submenu">제품사용후기</a><img src="http://korchem.cafe24.com/event/icon_event.gif" align="absmiddle"><br>
<a href="#" class="submenu">추천적립금코너</a><br>
<a href="#" class="submenu">사랑나눔</a><br>
<a href="#" class="submenu">언론속의 neTen</a><br>
<a href="#" class="submenu">뉴스레터</a><br>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>

<div id="menu5" style="width:110px; height:110px; position:absolute; left:436px; top:49px; z-index:5; FILTER: alpha(opacity=85);; visibility: hidden">
<table width="110" border="0" cellspacing="1" cellpadding="0" height="62" bgcolor="dcdcde" name="menu4">
<tr>
<td bgcolor="#FFFFFF" valign="middle">
<table width="103" border="0" cellspacing="0" cellpadding="0" align="right">
<tr>
<td valign="top">
<a href="#" class="submenu">쇼핑안내</a><br>
<a href="#" class="submenu">제품구입문의</a><br>
<a href="#" class="submenu">기술A/S문의</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>


<table width="550" border="0" cellspacing="0" cellpadding="0" height="50" name="mainnavi">
<tr>
<td><img src="http://korchem.cafe24.com/main_200504/topnavi_bg.gif" width="550" height="50" usemap="#topmap" border=""></td>
</tr>
</table>


<map name="topmap">
<area shape="rect" coords="222,16,297,39" onMouseOver="MM_showHideLayers('menu5','','hide','menu2','','hide','menu3','','show','menu4','','hide','menu1','','hide')">
<area shape="rect" coords="110,17,177,38" onMouseOver="MM_showHideLayers('menu5','','hide','menu2','','show','menu3','','hide','menu4','','hide','menu1','','hide')">
<area shape="rect" coords="3,16,94,38" onMouseOver="MM_showHideLayers('menu5','','hide','menu2','','hide','menu3','','hide','menu4','','hide','menu1','','show')">
<area shape="rect" coords="330,15,386,39" onMouseOver="MM_showHideLayers('menu5','','hide','menu2','','hide','menu3','','hide','menu4','','show','menu1','','hide')">
<area shape="rect" coords="437,17,492,39" onMouseOver="MM_showHideLayers('menu5','','show','menu2','','hide','menu3','','hide','menu4','','hide','menu1','','hide')">
</map>


</div>