IE 6 hover navigation problems

Question

Hello,

I have a navigation on a site which uses subnavigation in the main navigation... The only problem is, in IE6 the submenu pushes the other menuitems away to the side, causing the layout to break and messing up the users view of the site.

Im using the computed HTML:

<li class="ulHover">
   <a></a>
   <div class="subMenuTop"></div>
   <ul class="subMenu">
      <li></li>
      <li></li>
   </ul>
</li>

And the css:

li .ulHover
{
    width: 113px;
    height: 71px;
    background: transparent url(../images/MenuItemBgHover.png) no-repeat top right;
    text-align: right;
    float:left;
    vertical-align: bottom;
}
.subMenu
{
    background: #B02229;
    padding: 0px 5px 5px 5px;
    text-align:left;
    width: 215px;
    list-style: none;
    margin-left: 1px;
    position:absolute;
    display:none;
    z-index: 10000;
}

.subMenuTop
{
    width: 225px;
    height: 10px;
    background: transparent url("../images/SubMenuTop.png") no-repeat top left;
    margin-left: 1px;
    margin-top: -3px;
    display:none;
    z-index: 10000;
}

EDIT: Ok, I added absolute positioning to to the div... It stops the toplevel list items to be pushed away... But the offset of the submenu is way off... Only in IE6, in the other browsers, it does work...

Answer 1

The submenuTop div is not closed in your code. That could be the first step to fix the issue.

Answer 2

I am guessing that this is a horizontal menu. Is that correct? And have you tried to set the div position to "absolute" instead of the ul? Here is an example that might help you: http://www.armbruster-baeckerei.de/philosophie.php