[jQuery] superfish z-index problem

[jQuery] superfish z-index problem


I am using the superfish menu on a page that also has a google map on
it. I have tried to change the z-index of different elements many
different ways. my current code looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
</title>
<script src="js/MainScripts.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" media="screen" href="css/
superfish.css" /><link rel="stylesheet" type="text/css" media="screen"
href="css/superfish-vertical.css" />
<script src="js/jquery-1.2.6.min.js" type="text/javascript"></
script>
<script type="text/javascript" src="js/superfish.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("ul.sf-menu").superfish({
animation: { height: 'show' }, // slide-down effect
without fade-in
delay: 1200 // 1.2 second delay on
mouseout
});
});
</script>
<script src="http://maps.google.com/maps?
file=api&amp;v=2&amp;key=ABQIAAAA59UKubRwwNbom4chV2XX5BT2yXp_ZAY8_ufC3CFXhHIE1NvwkxT-
CT66mJHBl663tMCNavyeNN3W9Q"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
var point = new GLatLng(38.88, -94.81);
map.setCenter(point, 14);
var marker = new GMarker(point);
map.addOverlay(marker);
}
}
//]]>
window.onload = function() {
load();
}
window.unload = function() {
GUnload();
}
function open() {
var dddiv = document.getElementById('dd');
if (dddiv.style.display == 'none')
dddiv.style.display = 'inline';
else
dddiv.style.display = 'none';
return false;
}
</script>
</head>
<body>
<form name="aspnetForm" method="post" action="Location.aspx"
id="aspnetForm">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/
wEPDwUKMTY1NDU2..." />
</div>
<div>Header</div>
<div style="float:left; z-index:10000;">
            <ul class="sf-menu sf-vertical" style="z-index:100;">
                <li><a href="Default.aspx">Home</a></li>
                <li><a href="#">ScrapBook</a>
                 <ul>
                 <li><a href="#">2004-2005&nbsp;Season</a>
                 <ul>
                 <li><a href='ScrapBook.aspx?
Season=2004-2005&Show=Buddies'>Buddies</a></li>
                 <li><a href='ScrapBook.aspx?
Season=2004-2005&Show=Clue'>Clue</a></li>
                 <li><a href='ScrapBook.aspx?
Season=2004-2005&Show=Glen Gary Ross'>Glen Gary Ross</a></li>
                 <li><a href='ScrapBook.aspx?
Season=2004-2005&Show=Lonestar'>Lonestar</a></li>
                 <li><a href='ScrapBook.aspx?
Season=2004-2005&Show=Perfect Wedding'>Perfect Wedding</a></li>
                 <li><a href='ScrapBook.aspx?
Season=2004-2005&Show=Picnic'>Picnic</a></li>
                 </ul>
                 </li>
                 <li><a href="#">2007-2008&nbsp;Season</a>
                 <ul>
                 <li><a href='ScrapBook.aspx?
Season=2007-2008&Show=Nunsensations'>Nunsensations</a></li>
                 <li><a href='ScrapBook.aspx?
Season=2007-2008&Show=The Diary of Ann Frank'>The Diary of Ann Frank</
a></li>
                 </ul>
                 </li>
                 </ul>
                </li>
                <li><a href="Location.aspx">Location</a></li>
            </ul>
        </div>
<div style="float:left; z-index:1;">
<div id="map" style="width: 500px; height: 300px; z-index:1"></
div><br />
</div>
</form>
</body>
</html>
No matter what I try I can't get the menu to display above the google
map in IE, works fine in FF. Thanks in advance for your help