IE7 drop-down menu over flash - borders send mouseover to flash

edit: tl;dr: in ie7, a css dropmenu element borders yield mouse focus to a flash object underneath the drop down bit. help.

hi. i'm trying to create a css dropdown menu that appears over a flash object. this menu is created using a ul > li > a hierarchy, and the "a" tags have a border. the problem i'm having is that in IE7, when the mouse passes over the border of the "a" tags, a mouseover event is sent to the flash object underneath, and a mouseout is sent to the menu. this causes the menu to disappear when the mouse is moved down the menu.

i found this thread but am not sure how to implement the solution for a vertical menu.

relevant code samples (i realize that much of this is a complete mess, but i was given most of this from the designer and can't spend time rewriting it to be slightly less... ugh :P)

css:

 d.menu-td:hover ul.submenu, td.iehover ul.submenu, ul.submenu li:hover, ul.submenu li a:hover,
td.hmenu-td:hover ul.submenu, td.iehover ul.submenu li, td.iehover ul.submenu li a{
 display:block;
} 
ul.submenu li{
 border-top: 2px solid #000;
 display: block;
}
ul.submenu li a:link, ul.submenu li a:visited{
 font-size: 12px;
 padding: 2px;
 display: block;
 background-color: #277aab;
 height: 34px;
 color: #93bdd5;
}
ul.submenu li a:hover, ul.submenu li a:active{
 background-color: #319edf;
 color: #1f628d;
}

html:

the flash movie:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="990" height="280" id="header" align="middle" onmouseover="alert('111');">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="./upload/<?=$page_flash?>" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<embed src="./upload/<?=$page_flash?>" quality="high" wmode="transparent" width="990" height="280" name="header" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

the dropdown menu:

<td align="center" class="menu-td">
   <a href="index.php?p=2" class="menu">סניפים</a>
      <div style="position:relative;left:35px;">
         <ul class="submenu">
            <li>
               <a href="index.php?p=9" class="menu">link1</a>
            </li>
            <li>
               <a href="index.php?p=10" class="menu">link2</a>
            </li>
            <li>
               <a href="index.php?p=11" class="menu">link3</a>
            </li>
            <li>
               <a href="index.php?p=12" class="menu">link4</a>
            </li>
            <li>
               <a href="index.php?p=13" class="menu">link5</a>
            </li>
            <li>
               <a href="index.php?p=14" class="menu">link6</a>
            </li>
         &l开发者_JAVA技巧t;/ul>
      </div>
  </td>

a bit of javascript to help make ie recognize the hover event:

 <!--[if gte IE 5.5]>
  <script language="JavaScript" type="text/javascript">
   jQuery(document).ready(function(){
     jQuery("td.menu-td, td.hmenu-td").hover(
    function() { jQuery(this).addClass("iehover"); },
    function() { jQuery(this).removeClass("iehover"); }
     );
   });
  </script>
 <![endif]-->

a link to the actual page: link text (the offending menu is the second link for the right at the top of the page).

any and all help is greatly appreciated.

You should add any background color to submenu <ul>. Basically if item doesn't have background then it is also "transparent" for mouse events.

What you need to to is make your flash transparent like this (point 6).