drop down menu does not go over iframe

I think I need a second pair of eyes on this one.

I have a drop down menu which sits on the top page. I have an iframe that sits on the same page.  The drop down menu diplays on top of the iframe in firefox, but not internet explorer.  I have tested different options with z-index, but it sill disappears where the iframe is in IE.

Here is the top navigation.  The classes control the dropdowns.
 
<div align="center" id="topcorner" style="background-color:#C8D5FF">
	<ul id="nav" style="width:1000px">
		<li class="top"><a class="top_link_logo" href="<%= response.encodeURL("RedirectServlet?action=&success=m1_main.jsp&error="+ request.getServletPath() ) %>" target="_parent"><span><img src="images/logo_fabuso.jpg" border="0"></span></a></li>
 
		<li class="top"><a class="top_link" href="<%= response.encodeURL("RedirectServlet?action=&success=m1_news.jsp&error="+ request.getServletPath() ) %>" target="_parent"><span>Tools</span></a>
			<ul class="sub" style="width:150px">
				<li><a href="<%= response.encodeURL("DynamicPagesServlet?action=&success=m1_dynamic_landing.jsp&error="+ request.getServletPath() ) %>"><font color="333333">Instant Sites</font></a></li>
			</ul>
		</li>
		<li class="top"><a class="top_link" href="<%= response.encodeURL("RedirectServlet?action=&success=m1_resources.jsp&error="+ request.getServletPath() ) %>" target="_parent"><span>Resources</span></a>
			<ul class="sub" style="width:115px">
				<li><a href="<%= response.encodeURL("RedirectServlet?action=&success=m1_resources.jsp&error="+ request.getServletPath() ) %>"><font color="333333">All</font></a></li>
			</ul>
		</li>
		<li class="top"><a class="top_link" href="<%= response.encodeURL("GivGetResourcesServlet?action=&success=m1_my_account.jsp&error="+ request.getServletPath() ) %>" target="_parent"><span>Account</span></a></li>
		<li class="top"><a class="top_link" href="javascript:popUp('../livechat/client.php')"><span>Live Support</span></a></li>
		<li class="top"><a class="top_link" href="<%= response.encodeURL("LogoffServlet?action=&success=index.jsp&error="+ request.getServletPath()) %>" target="_parent"><span>Logout</span></a></li>
	</ul>
</div>
 
 
 
Here are the classes.
.preload1 {background: url(jquery/plugins/pro_drop_down_1/blank_over.gif);}
.preload2 {background: url(jquery/plugins/pro_drop_down_1/blank_overa.gif);}
 
#nav {padding:0; margin:0; list-style:none; height:28px; background:#C8D5FF; position:relative; z-index:2500; font-family:arial, verdana, sans-serif;}
#nav li.top {display:block; float:left;}
#nav li a.top_link {display:block; float:left; height:28px; line-height:27px; color:#fff; text-decoration:none; font-size:12px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;}
#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:28px;}
#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:28px;}
#nav li a.top_link_logo {display:block; float:left; height:28px; line-height:27px; color:#fff; text-decoration:none; font-size:12px; font-weight:bold; padding:0 0 0 0px; cursor:pointer;}
#nav li a.top_link_logo span {float:left; display:block; padding:2px 12px 0 5px; height:28px;}
#nav li a.top_link:hover {color:#000;}
#nav li a.top_link:hover span {background:url(jquery/plugins/pro_drop_down_1/spacer.gif) no-repeat right top;}
#nav li a.top_link:hover span.down {background:url(jquery/plugins/pro_drop_down_1/spacer.gif) no-repeat right top;}
 
#nav li:hover > a.top_link {color:#000; background: url(jquery/plugins/pro_drop_down_1/spacer.gif) no-repeat;}
#nav li:hover > a.top_link span {background:url(jquery/plugins/pro_drop_down_1/spacer.gif) no-repeat right top;}
#nav li:hover > a.top_link span.down {background:url(jquery/plugins/pro_drop_down_1/spacer.gif) no-repeat right top;}
 
/* Default list styling */
 
#nav li:hover {position:relative; z-index:1200;}
 
/* keep the 'next' level invisible by placing it off screen. */
#nav ul, 
#nav li:hover ul ul,
#nav li:hover ul li:hover ul ul,
#nav li:hover ul li:hover ul li:hover ul ul,
#nav li:hover ul li:hover ul li:hover ul li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none; text-align:left;}
 
#nav li:hover ul.sub
{left:0; top:26px; background: #DBDBDB; padding:3px; border:2px solid #E9E9E9; white-space:nowrap; height:auto; z-index:1300; filter:alpha(opacity=75); opacity:.750; -moz-opacity:.750; -khtml-opacity:0.75;}
#nav li:hover ul.sub li
{display:block; height:20px; position:relative; float:left; width:100%; font-weight:normal;}
#nav li:hover ul.sub li a
{display:block; font-size:11px; height:20px; width:90%; line-height:20px; text-indent:5px; color:#000; text-decoration:none;}
#nav li ul.sub li a.fly
{background:#fff;}
#nav li:hover ul.sub li a:hover 
{background:#E9E9E9; color:#fff;}
#nav li:hover ul.sub li a.fly:hover
{background:#E9E9E9; color:#fff;}
 
#nav li:hover ul li:hover > a.fly {background:#3a93d2 url(jquery/plugins/pro_drop_down_1/arrow_over.gif) 80px 7px no-repeat; color:#fff;} 
 
#nav li:hover ul li:hover ul,
#nav li:hover ul li:hover ul li:hover ul,
#nav li:hover ul li:hover ul li:hover ul li:hover ul,
#nav li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul
{left:90px; top:-4px; background: #DBDBDB; padding:3px; border:1px solid #E9E9E9; white-space:nowrap; z-index:1400; height:auto;}
 
</style>
 
 
 
Here is the iframe that it won't go over in IE.
<iframe id="iframe_i_nav" name="iframe_i_nav" src="m1_dynamic_nav_frame1pre.jsp" frameborder="0" width="998" scrolling="no" height="25" align="top" style="background-color:#DFE7FF; border-right-width:1px; border-right-color:#CCCCCC; border-right-style:solid; border-left-width:1px; border-left-color:#CCCCCC; border-left-style:solid; border-top-width:1px; border-top-color:#CCCCCC; border-top-style:solid; z-index:-1">
If you can see this, your browser does not support iframes!
</iframe>

Select allOpen in new window