CSS popup menu werkt niet naar behoren

[Verwijderd]

Voor een opdracht voor school moeten we een portfolio site voor ons zelf maken. Op deze site wil ik zo goed mogelijk gebruik maken van CSS, dus voor het popup menu maak ik gebruik van de Suckerfisch dropdowns 'techniek'. Ik maak echter geen gebruik een list als 'parent', maar een plaatje, gepositioneerd in een layer.
De code achter een menu item is bijvoorbeeld:

HTML:

  <div class="menuItem" id="menuAfgerondeProjecten">
    <a href="#">[img]"img/menu_out_projecten.gif"[/img]</a>
    <div class="popUpDiv">
        <ul>
            <li><a href="">Websites</a></li>
            <li><a href="">Print</a></li>
            <li><a href="">Digitaal</a></li>
        </ul>
     </div>
  </div>

de div class popUpDiv ziet er als volgt uit:

Cascading Stylesheet:

.popUpDiv
{
    display : none;
    position : relative;
    left : 90px;
    top : -20px;
    width : 100px;
    border : 1px solid #974300;
    background : #938D5C url('img/menu_popup_background.jpg') repeat-x;
    z-index : 3;
}

als je met de muis over een .menuItem class gaat wordt dit geactiveerd:

Cascading Stylesheet:

.menuItem:hover .popUpDiv, .menuItemOver .popUpDiv
{
    display : block;
}

die 2e class, .menuItemOver, is een hack om het menu in IE te laten werken. omdat IE de :hover pseudeclass niet ondersteunt laat ik me javascript de naam van .menuitem veranderen naar menuitemover, om het op deze manier te omzeilen (deze manier gebruiken ze ook bij suckerfish, maar ik heb hem aangepast voor mijn div gebasseerde menu).
dit is de gebruikte javascript:

JavaScript:

    startList = function() {
        if (document.all&&document.getElementById) {
            navRoot = document.getElementById("menuContainer");
            for (i=0; i<navRoot.childNodes.length; i++) {
                node = navRoot.childNodes[i];
                if (node.getAttribute('className')=="menuItem") {
                    node.onmouseover=function() {
                        this.className ="menuItemOver";
                        this.getAttribute('className');
                    }
                    node.onmouseout=function() {
                        this.className="menuItem";
                    }
                }
            }
        }
    }
    window.onload=startList;

op zich werkt het nu in IE, maar nu het probleem:
wanneer ik het menu in opera bekijk, dan werkt het menu perfect, en via de pure CSS kant (dus het bovenstaande javascriptje is niet nodig). wanneer ik het echter in IE bekijk openen de '.popUpdiv' layers ónder de menu items op, waardoor ik dus er niet op kan klikken. alsvolgt:

Opera	IE

In firefox werkt het helemaal niet.

kijk hier voor de volledige site.

weet iemand waarom de popup's in IE ónder de menu items verschijnen? terwijl hun z-index goed staat? en waarom het menu helemaal niet werkt in FireFox?

[faabman]

waarom gebruik je niet het volledige voorbeeld van ALA??? je navigatie is toch eigenlijk gewoon een list???

daarbij kun je je list zo opmaken

HTML:

<ul id="nav">
  <li id="afgeronde-projecten"><a href="#"><span>Afgeronde projecten</span></a>
    <ul>
      <li><span>Websites</span></li>
      <li><span>Print</span></li>
      <li><span>Digitaal</span></li>
    </ul>
  </li>
</ul>

Cascading Stylesheet:

#afgeronde-projecten{
  display:block;
  height:xxx;
  width:xxx;
  background-image:url(afbeelding met hover);
  background-repeat:no-repeat;
  background-position:left top;
}

#afgeronde-projecten a{
  display:block;
  height:xxx;
  width:xxx;
  background-image:url(afbeelding zonder hover);
  background-repeat:no-repeat;
  background-position:left top;
}

#nav a:hover{
  background-image:none;
}

#nav li a span{
  display:none;
}

ik ga er van uit dat je wanneer je naar bovenstaande kijkt en dat combineert met hetgeen je op ala en in de search kunt vinden genoeg info hebt om je menuutje wel juist (en werkend) op te bouwen...

[Verwijderd]

nou omdat ik mijn items nogal onregelmatig heb uitgelijnd, maar goed, ik hoopte dat het anders kon, maar ik probeer het wel even op jou manier

[Verwijderd]

met de volledige list versie werkt het nog niet 100%, maar toen werkte het wel in FF.. om het in IE goed te krijgen pas ik de zIndex-en aan in het onover stukje bij het javascript :

JavaScript:

startList = function() {
   if (document.all&&document.getElementById) {
      navRoot = document.getElementById("menuList");
      for (i=0; i<navRoot.childNodes.length; i++) {
         node = navRoot.childNodes[i];
         if (node.nodeName=="LI") {
            node.onmouseover=function() {
               this.className+=" over";
               this.style.zIndex = 3;
            }
              node.onmouseout=function() {
                 this.className=this.className.replace(" over", "");
               this.style.zIndex = 1;
            }
         }
      }
   }
}

[Woudloper]

Waarom maakt je niet gewoon gebruik van de Whatever: hover van clay. Deze zorgt er namelijk ook voor dat de submenu's correct worden getoond in Internet Explorer.

[André]

Woudloper schreef op maandag 20 december 2004 @ 09:15:
Waarom maakt je niet gewoon gebruik van de Whatever: hover van clay. Deze zorgt er namelijk ook voor dat de submenu's correct worden getoond in Internet Explorer.

Omdat die niet werkt in IE5 en IE4