IE7 hover:li bug

[meekrob]

I've been working on a CSS dropdown menu with a flyout submenu. I've been struggling with IE 7 z-index bugs. I thought I solved them, but one has 'popped up' to plague me. This menu currently works under IE 5.5, 6, Firefox 3 and Webkit/Safari. The bug only occurs under IE 7. To see the error go to

http://www.twocell.com

and mouseover "Services" then mouseover "By Industry" and "Healthcare". As you can see, the border of the menu ignores the z-index and pops through the submenu. I've tried applying the usual fixes but no luck... can anyone see a solution?

The CSS:
==============================================

/* Navbar Defaults */
#navbar {
position:relative;
height:18px;
top:182px;
padding:0; margin:0;
list-style:none;
z-index:100;
}

#navbar a:hover {
position:relative; /* For IE 5.5 and 6 */
z-index:1;
}

/* Topmost Links */
#navbar li.topnav {
display:block; float:left;
}

#navbar li a.top-link {
display:block; float:left;
height:20px;
color:#CCCCCC;
font-size:11px; font-weight:bold; line-height:13px; letter-spacing: 1px;
background-image:url(../images/phoenix-arrow-down.gif);
background-repeat:no-repeat; background-position:100% 35%;
padding:0 0 0 12px;
}

#navbar li a.top-link span.dropdown {
height:20px;
padding:0 24px 0 12px;
}

/* Underline for the accesskeys */
#navbar li a.top-link span.underline {
display:inline; /* fix for IE 5.5 and 6 */
text-decoration:underline;
padding:0; /* fix for Opera */
margin:0; /* fix for IE 5.5 and 6 */
}

/* Hover on Toplinks */
#navbar li:hover a.top-link span, #navbar a.top-link:hover span {
color:#FFFFFF;
}

/* IE 5.5 & 6 hacks*/
#navbar table {
position:absolute;
border-collapse:collapse;
left:0; top:0;
}

#navbar li:hover {
position:relative;
}

/* Dropdown Menu */

#navbar :hover ul.sub {
left:1px; top:18px;
padding:3px;
white-space:nowrap;
width:125px;
height:auto;
background-color:#000000;
color:#FFCC33;
border-left:solid #333333; border-right:solid #333333; border-bottom:solid #333333;
/* Some bleeding edge CSS3 rounded corners for Firefox and Safari */
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-left-radius:10px;
-webkit-border-bottom-right-radius:10px;
z-index:100;
}

#navbar :hover ul.sub li {
postion:relative;
display:block;
height:20px;
float:left;
width:125px;
}


#navbar :hover ul.sub li a {
display:block;
font-weight:normal; font-size:11px; font-weight:lighter;
line-height:18px; letter-spacing:normal;
text-decoration:none; text-indent:5px;
height:18px; width:125px;
color:#FFCC33;
}

/* Unselected Submenu */
#navbar li ul.sub li a.fly {
background-color:#000000 ;
background-image:url(../images/phoenix-arrow-right.gif) ;
background-position:115px 4px ;
background-repeat:no-repeat ;
}

/* Menu Item Selected */
#navbar :hover ul.sub li a:hover {
background-color:#333333;
color:#CCCCCC;
border-color:#333333;
}

/* Flyout Menu Selected */
#navbar :hover ul.sub li a.fly:hover {
background-color:#333333;
background-image:url(../images/phoenix-arrow-right.gif);
background-position:100% 50%;
background-repeat:no-repeat;
color:#CCCCCC;
z-index:100;
}

/* Flyout Menu fix for the IE 5.5 and 6 crowd */

#navbar a:hover a:hover ul,
#navbar a:hover a:hover a:hover ul {
left:115px; top:5px;
background-color:#000000;
padding:3px;
border: 3px solid #333333;
white-space:nowrap;
width:125px;
height:auto;
}


/* Hide the flyout */
#navbar ul,
#navbar a:hover ul ul,
#navbar a:hover a:hover ul ul {
position:absolute;
left:-9999px;
top:-9999px;
width:0;
height:0;
margin:0;
padding:0;
list-style:none;
}

/* The flyout */
#navbar li:hover li:hover > ul {
left:115px; top:4px;
background-color:#000000;
padding:3px;
white-space:nowrap;
width:125px;
height:auto;
border: 3px solid #333333;
/* Some bleeding edge CSS3 rounded corners for Firefox and Safari */
-moz-border-radius-topright:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-bottomleft:10px;
-webkit-border-top-right-radius:10px;
-webkit-border-bottom-right-radius:10px;
-webkit-border-bottom-left-radius:10px;
z-index:120;
}



The HTML:
==============================================

<ul id="navbar">

<!-- About -->

<li class="topnav"><a href="#" id="about" class="top-link" accesskey="a">
<span class="dropdown"><span class="underline">a</span>bout</span>
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub">
<li><a href="arizona-computer-consultants.php">Philosophy</a></li>
<li><a href="#" class="fly">Pricing &amp; Terms
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="pricing.php">Pricing</a></li>
<li><a href="tos.php">Terms of Service</a></li>
<li><a href="nda.php">Non-Disclosure</a></li>
</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>


<li><a href="references.php">References</a></li>
<li><a href="contact.php">Contact Info</a></li>
<li><a href="about-the-logo.php">About the Logo</a></li>
</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<!-- Services -->

<li class="topnav"><a href="#" id="services" class="top-link" accesskey="s">
<span class="dropdown"><span class="underline">s</span>ervices</span>
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub">
<li><a href="#" class="fly">By Industry
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="construction.php">Construction</a></li>
<li><a href="healthcare.php">Healthcare</a></li>
<li><a href="technology.php">Technology</a></li>
<li><a href="manufacturing.php">Manufacturing</a></li>
</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><a href="#" class="fly">Connectivity
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="t1.php">T1 Data Lines</a></li>
<li><a href="dsl.php">Business Class DSL</a></li>
</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><a href="linux.php">Linux</a></li>
<li><a href="backup.php">Secure Backups</a></li>
<li><a href="free-domain-hosting-for-arizona-nonprofits.php">Non-Profits</a></li>
</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<!-- Tools -->

<li class="topnav"><a href="#" id="tools" class="top-link" accesskey="t"><span class="dropdown"><span class="underline">t</span>ools</span>
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub">
<li><a href="

http://knowledge.twocell.com">Knowledgebase</a></li>

<li><a href="help.php">Help!</a></li>
<li><a href="

http://login.twocell.com">Client

Login</a></li>
<li><a href="freesoftware.php">Free Software</a></li>
<li><a href="#">Web Snippets</a></li>
</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<!-- Contact -->

<li class="topnav"><a href="#" id="contact" class="top-link" accesskey="a"><span class="dropdown"><span class="underline">c</span>ontact</span>
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub">
<li><a href="contact.php">Contact Page</a></li>
</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

</ul>

 

[Vragabond]

First of all, you're sending specific instructions for IE7 and greater to close the anchor. This could have something to do with your issues, given that all other browsers don't see this instruction. I would start with that, to make sure that IE7 is delivered the same content as the other browsers, before you expect it to render things like the other browsers.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]