Css – IE 6 hover navigation problems


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">
   <div class="subMenuTop"></div>
   <ul class="subMenu">

And the css:

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

    width: 225px;
    height: 10px;
    background: transparent url("../images/SubMenuTop.png") no-repeat top left;
    margin-left: 1px;
    margin-top: -3px;
    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…

Best Solution

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

Related Question