The nested list menu on this page requires the child lists to be a higher z-index than the parent list. This is taken care of in the CSS and FF & NN displays the menu properly.

However IE needs a javascript helper to change the css display property to block when the applicable li is moused over.

activateMenu = function(nav) {

    /* currentStyle restricts the Javascript to IE only */
	if (document.all && document.getElementById(nav).currentStyle) {  
        var navroot = document.getElementById(nav);
        
        /* Get all the list items within the menu */
        var lis=navroot.getElementsByTagName("LI");  
        for (i=0; i<lis.length; i++) {
        
           /* If the LI has another menu level */
            if(lis[i].lastChild.tagName=="UL"){
            
                /* assign the function to the LI */
             	lis[i].onmouseover=function() {	
                
                   /* display the inner menu */
                   this.lastChild.style.display="block";
                }
                lis[i].onmouseout=function() {                       
                   this.lastChild.style.display="none";
                }
            }
        }
    }
}

The menu works fine except the child li's are under the parent li's.

Changing the JS function to also increase the z-index of the applicable node doesn't change anything. Any ideas on how to get IE stack these elements correctly?

I'm not sure if this will work, but I noticed you have a z-index of 99 on both #nav ul and #nav ul ul. I'm thinking if you give #nav ul ul a higher z-index it will work. Not 100% sure, but certainly easy enough to try.

Have already tried giving each ul a z-index and also setting #nav ul, #nav ul ul to z-index: auto; All ul's are positioned so I don't see why this rule is being igored by IE...

Turns out to be an IE z-index relative/absolute bug. Too hard to code around...

I had a similar problem, only with IE ignoring my z-index when trying to place an inline h1 tag over a margin above it.

I have similar problems.

When running some special JavaScript it magicaly puts the div in the background.
Uppdate the div and it comes back farward.

Im also using relative position on my div....

Do you have a sulution on how to work around it?

my link: http://ilemyr.no-ip.org/film/test.php

press link: Egna filmer
then any other link : Skapa TV-serie
then back to : Egna filmer

poff, div goes to the background....
the link: Egna filmer does in no way target the div that looses its position...
The link b4: Skapa TV-serie does thoe....


I so would like to sort this out.. -smile-
Ofcuase, only do this in IE. Firefox looks greate

I have now worked around it using cut images and tabels...
Sad that you cant use div due to IE buggs... =/