ie z-index issue with drop-down menu

I have two drop down menus on the same page.  One is on the top row and the other is below it.

The top row drop down goes over the bottom one when activated. The problem is that, in IE, the bottom drop down menu bleeds through the top one.  Meaning if I mouse over the top one and activate the drop down, but then mouse over the area where the bottom drop down is, the bottom layer link bleeds through the top dropdown menu and activates the bottom dropdown.

it should only activate the bottom drop down if the user mouses off the top then on to the bottom.  The top one should be able to go over the bottom with no trouble.

FYI: This works in Firefox, but not IE.

Here is the code for the top drop down including it's css styles
 
<style type="text/css">
/* ================================================================ This copyright notice must be kept untouched in the stylesheet at all times. The original version of this stylesheet and the associated (x)html is available at http://www.stunicholls.com/menu/pro_drop_1.html Copyright (c) 2005-2007 Stu Nicholls. All rights reserved. This stylesheet and the associated (x)html may be modified in any way to fit your requirements. =================================================================== */
 
.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:3300;}
 
/* 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; z-index:3300;}
 
#nav li:hover ul.sub
{left:0; top:26px; background: #DBDBDB; padding:3px; border:2px solid #E9E9E9; white-space:nowrap; height:auto; z-index:3300; 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:3300; height:auto;}
 
</style>
 
 
Here is the code for the bottom drop down including its css styles.
 
<dl class="dropdown">
  <dt id="one-ddheader" onMouseOver="ddMenu('one',1)" onMouseOut="ddMenu('one',-1)">My Sites<font size="+1">&rarr;</font></dt>
  <dd id="one-ddcontent" onMouseOver="cancelHide('one')" onMouseOut="ddMenu('one',-1)">
    <ul id="sitedropdown">
<%@ include file="m1_fabsites_landing_drop2.jsp" %>
    </ul>
  </dd>
</dl>
 
* {padding:0; margin:0}
.dropdown {float:left; font-size:10px; font-family:Verdana, Arial, Helvetica;
}
.dropdown dt {
margin-top:0;
width:170px; 
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
color:#006FB5;
text-align:left;
padding-left:10px;
cursor:pointer;
height:30px; 
position:absolute;
float:left;
z-index:187;
}
 
.dropdown dd {
position:absolute; 
overflow:hidden;
height:300px;
width:170px;
display:none; 
background:#fff; 
z-index:186; 
margin-top:0px;
margin-left:100px;
text-align:left;
}
 
.dropdown ul {width:168px; border:1px solid #7F7F7F; list-style:none; border-top:none}
.dropdown li {display:inline}
.dropdown a {display:block; padding:5px; color:#333; text-decoration:none; background:#EBF0FF; width:170px}
.dropdown a:hover {background:#D7D7D7; color:#006FB5}
.dropdown .underline { border-bottom-width:1px; border-bottom-style:groove; border-bottom-color:#7F7F7F; font-family: Geneva, Arial, Helvetica, sans-serif; color:#006FB5; text-decoration:none; font-size: 10px; cursor:pointer;cursor:hand;}
.dropdown .underlineadd { border-bottom-width:1px; border-b

Select allOpen in new window