Trying to make submenu overlap main-menu in IE on window resize w/o using JS?

Question

Hey everyone,

I have following css-menu:

The menu works fine everywhere BUT IE6 and IE7.

Here is some code:

CSS (mainly for IE, similar for other browsers):

.menu {
    height:25px; 
    position:fixed; 
    z-index:100;
    font-family:arial, sans-serif;
}
* html .menu {
    z-index:100;
}
.menu ul {
    padding:0;
    margin:0;
    list-style-type:none;
    z-index:90;
}
.menu ul ul {
    visibility:hidden;
    position:realtive;
    height:0;
    top:30px;
    left:0; 
    width:140px;
    border-top:1px solid #000;
    z-index:120;
}
* html .menu ul ul {
    top:30px;
    t\op:30px;
    z-index:120;
    postion:relative;
}
.menu table {
    top:0; 
    left:0; 
    border-collapse:collapse;
    z-index:120;
    postion:relative;
}
.menu li {
    float:left;
    width:auto;
    position:relative;
    z-index:100;
}
.menu a, .menu a:visited {
    display:block;
    font-size:12px;
    text-decoration:none; 
    color:#fff; 
    width:auto; 
    height:30px; 
    border:1px solid #000; 
    border-width:1px 0px 1px 1px;
    background:#09c; 
    padding-left:10px; 
    line-height:29px; 
    font-weight:bold;
}
* html .menu a, * html .menu a:visited {
    width:120px; 
    w\idth:120px;
}

.menu ul ul a.drop, .menu ul ul a.drop:visited {
    background:#AD0101;
    z-index:100;
}
.menu ul ul a.drop:hover{
    background:#AD0101;
    z-index:100;
}
.menu ul ul a, .menu ul ul a:visited {
    background:#AD0101; 
    color:#fff; 
    height:auto; 
    line-height:1em; 
    padding:5px 10px; 
    width:140px;
    border-width:0 1px 1px 1px;
    z-index:100;
}
* html .menu ul ul a, * html .menu ul ul a:visited {
    width:140px;
    w\idth:140px;
    z-index:100;
}
.menu ul li:hover ul,
.menu ul a:hover ul{
    visibility:visible;
}

And this is the HTML-syntax I use:

<div class="menu">
    <ul>
        <li><a class="hide mittel" href="#">MenuItem1
            <!--[if IE 7]><!--></a><!--<![endif]-->
            <!--[if lte IE 6]>
            <table><tr><td>
            <![endif]-->
            <ul>
                <li><a href="#">Sub1</a></li>
                <li><a href="#">Sub2</a></li>
            </ul>
            <!--[if lte IE 6]>
            </td></tr></table>
            </a>
            <![endif]-->
        </li>
        <li><a class="hide mittel" href="#">MenuItem2
        <!--[if IE 7]><!--></a><!--<![endif]-->
        <!-- more menu-items ... -->
    </ul>
</div>

Here is the problem I see when I test this in IE 6-7:

As you can see from the screenshot: When I resize the window the main-menu is in two lines, but looks good, no layoutproblems whatsoever. When I hover over an item in the first line that has a submenu the submenu items do not overlap the main menu ... As you can see I've tried the z-index, but I guess either that doesn't change anything or I did it wrong. So how can I make the submenu overlap the main-menu when the window is resized w/o using Javascript? Thnx in advance!

Answer 1

1) .menu ul ul {position:relative;} not realtive.

2) If that does not fix the problem make the submenu position absolute. IE6 and IE7 honor the z-index of objects with absolute positioning as superior to any other defined z-index.

Answer 2

hi have you solved your problem. i got the same issue like yours... :(