<style type="text/css">
#sub1, #sub2, #sub3, #sub4 , #sub5, #sub6, #sub7, #sub7
#{visibility:hidden; background-color:#ffffff; width:200; border:0 px solid #ffffff; padding:9; font-family: Arial, Helvetica, sans-serif; font-size:8pt; line-height:150%;  filter: Alpha(Opacity=78)}

#sub1, #sub2, #sub3, #sub4 , #sub5, #sub6, #sub7, #sub7
{visibility:hidden; background-color:#ffffff; width:200; border:0 px solid #ffffff; padding:9; font-family: Arial, Helvetica, sans-serif; font-size:8pt; line-height:150%; opacity:0.8 }

</style>

위에 보시면  익스에서만 적용하실때에는  #를 붙이시고요
그 이외의 브라우져는 안붙이시고 위처럼 이어 붙이시면  각각 분리되서 적용됩니다.

거기에 반투명 레이어 적용법이 틀린데여  익스는  filter: Alpha(Opacity=78)
파폭은  opacity:0.8 이렇게 틀려지네여

해서 반투명 서브메뉴 적용소스는

<script language="JavaScript">
<!--
function show(id) {
document.getElementById(id).style.visibility = 'visible';

}

function hide(id) {
 document.getElementById(id).style.visibility = 'hidden';

}

//-->
</script>

<style type="text/css">
#sub1, #sub2, #sub3, #sub4 , #sub5, #sub6, #sub7, #sub7
#{visibility:hidden; background-color:#ffffff; width:200; border:0 px solid #ffffff; padding:9; font-family: Arial, Helvetica, sans-serif; font-size:8pt; line-height:150%; filter: Alpha(Opacity=78)}

#sub1, #sub2, #sub3, #sub4 , #sub5, #sub6, #sub7, #sub7
{visibility:hidden; background-color:#ffffff; width:200; border:0 px solid #ffffff; padding:9; font-family: Arial, Helvetica, sans-serif; font-size:8pt; line-height:150%; opacity:0.8 }

</style>

위의 소스와 

서브메뉴 레이어는

  <!--   레이어 1 시작 -->
<div style="position:relative;top:0;left:0">
                      <div id="sub1" style="position:absolute;top:-437;left:258" onMouseOver="MM_swapImage('Image18','','/images/m_m_on__04.jpg',1),show('sub1')"  onMouseOut="MM_swapImgRestore(),hide('sub1')">
                       <table>
                       <tr><td>
                       <a href="/sub_2.php?path=sub_2_math"  >BOY</a><br>
                       <a href="/sub_2.php?path=sub_2_math_1"  >GIRL</a>
                       </td></tr>
                       </table>

                      </div>
                      </div>
 <!--   레이어 끝과 동시에 header 끝--> 

이렇게 넣어주시고

각각 버튼에는

<a href="#" onMouseOut="MM_swapImgRestore(),hide('sub1')" onMouseOver="MM_swapImage('Image18','','/images/m_m_on__04.jpg',1),show('sub1')"   >123</a>

이런식으로 응용하시면 되지 않을까... 싶습니다.

예제 사이트 :  http://bonjourbebe818.com/cart/index.php  에 왼쪽 메뉴에 적용하였습니다.