title: IE7 drop-down menu over flash - borders send mouseover to flash
body: <p>edit: <strong>tl;dr: 
  in ie7, a css dropmenu element borders yield mouse focus to a flash object underneath the drop down bit. help.</strong></p>
  
  <p>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.</p>
  
  <p>i found <a href="https://stackoverflow.com/questions/3367110/drop-down-menu-disappears-and-comes-back-only-in-ie7-problem">this thread</a> but am not sure how to implement the solution for a vertical menu.</p>
  
  <p>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)</p>
  
  <p><strong>css:</strong></p>
  
  <pre><code> 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;
  }
  </code></pre>
  
  <p><strong>html:</strong></p>
  
  <p><strong>the flash movie:</strong></p>
  
  <pre><code>&lt;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');"&gt;
  &lt;param name="allowScriptAccess" value="sameDomain" /&gt;
  &lt;param name="movie" value="./upload/&lt;?=$page_flash?&gt;" /&gt;
  &lt;param name="quality" value="high" /&gt;
  &lt;param name="wmode" value="opaque" /&gt;
  &lt;embed src="./upload/&lt;?=$page_flash?&gt;" 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" /&gt;
  &lt;/object&gt;
  </code></pre>
  
  <p><strong>the dropdown menu:</strong></p>
  
  <pre><code>&lt;td align="center" class="menu-td"&gt;
     &lt;a href="index.php?p=2" class="menu"&gt;סניפים&lt;/a&gt;
        &lt;div style="position:relative;left:35px;"&gt;
           &lt;ul class="submenu"&gt;
              &lt;li&gt;
                 &lt;a href="index.php?p=9" class="menu"&gt;link1&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                 &lt;a href="index.php?p=10" class="menu"&gt;link2&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                 &lt;a href="index.php?p=11" class="menu"&gt;link3&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                 &lt;a href="index.php?p=12" class="menu"&gt;link4&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                 &lt;a href="index.php?p=13" class="menu"&gt;link5&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                 &lt;a href="index.php?p=14" class="menu"&gt;link6&lt;/a&gt;
              &lt;/li&gt;
           &lt;/ul&gt;
        &lt;/div&gt;
    &lt;/td&gt;
  </code></pre>
  
  <p><strong>a bit of javascript to help make ie recognize the hover event:</strong></p>
  
  <pre><code> &lt;!--[if gte IE 5.5]&gt;
    &lt;script language="JavaScript" type="text/javascript"&gt;
     jQuery(document).ready(function(){
       jQuery("td.menu-td, td.hmenu-td").hover(
      function() { jQuery(this).addClass("iehover"); },
      function() { jQuery(this).removeClass("iehover"); }
       );
     });
    &lt;/script&gt;
   &lt;![endif]--&gt;
  </code></pre>
  
  <p>a link to the actual page:
  <a href="http://afik-p.co.il/hns/index.php?p=9" rel="nofollow noreferrer">link text</a>
  (the offending menu is the second link for the right at the top of the page).</p>
  
  <p>any and all help is greatly appreciated.</p>