Superfish Css/Jquery Menu goes under Flash Content in IE7

Question

http://mindfulintegrations.com/signiacapital/index.html

It works fine in FF3 and IE8 using SwfObject2 and wmode=transparent, but for the life of me I can not get the menu to dropdown over the flash content in IE7. Any help would be appreciated.

I've tried playing around with Z-indexes, and to be honest my understanding of them is somewhat low. Perhaps there is a combination of things I could do to fix my issue?

Thanks.

<script type="text/javascript" src="flash/swfobject.js"></script>
 <script type="text/javascript">
  var flashvars = {};
  var params = {};
  params.wmode = "transparent";
  var attributes = {};
  attributes.id = "homemovie";
  swfobject.embedSWF("flash/home_movie.swf", "homemovie", "1024", "330", "9.0.0", false, flashvars, params, attributes);
 </script>

Is the script in my index page.

For Z-indexing, this is the CSS for the various DIV's

for the header container

#header-container{ position:relative; height:140px; background-color:#FFFFFF; width:100%; z-index:2; }

for the navbar

#navbar{ position:absolute; left: 300px; top:90px; clear:both; z-index:1; }

for the flash element

#homemovie{
height:330px
position:absolute;
z-index:-1;
}

Answer 1

Could you elaborate on what you've tried with z-indexes?

My first recommendation would be adding a greater z-index to the #header-container div.

Z-indexes in Internet Explorer can be tricky because and element can retain the z-index of its parent.

Answer 2

Its your style sheet for the site: http://mindfulintegrations.com/signiacapital/css/style.css

The issue is in #header-content which adds a position in IE7 that you don't want:

#header-container{
/**position:relative;**/ /**Overwrites superfish fix for IE7, remove and should work.**/ 
 height:140px; 
 background-color:#FFFFFF;
 width:100%;
}