[CSS] Suckerfish menu klapt niet correct uit

[Foutlook]

Ik heb een suckerfish menu (van A List Apart) geimplementeerd in deze site: Gortel.com. Nu werkt het uitklappen van het 3e niveau in IE nog niet goed. Als je over een item van het 2e niveau gaat, klappen alle derde niveau's namelijk al open, ook degenen die niet onder het bewuste item van het 2e niveau horen. In Firefox werkt alles wel goed.

Ter verduidelijking:
IE 6 - Fout - 3e niveau van School klapt ook open


Firefox 1.04 - Goed - afgezien van de opmaak (dat geeft verder niet)


Mijn vraag:
Hoe kan ik het voor elkaar krijgen dat in IE alleen het juiste 3e niveau uitgeklapt wordt, in plaats van alle 3e niveau's??

De CSS welke ik gebruik voor het openklappen van het menu:

code:

    a.hoofdmenu:link, a.hoofdmenu:visited, a.hoofdmenu:active, a.hoofdmenu_current {        
            text-decoration: none;
            font-weight: bold;
            color: #000;
            padding: 2px 7px 6px 7px;
            margin-top: 7px;
        }
        
        a.hoofdmenu:hover, a.hoofdmenu_current {
            background: #E0A000;
            font-weight: bold;
            color: #fff;
        }
        
        #hoofdmenu ul { /* all lists */
            padding: 0;
            margin: 0;
            list-style: none;
            z-index: 10;
        }
        
        #hoofdmenu li { /* all list items */
            display: inline;
            position: relative;
            margin: 0;
            padding: 0;
            border-left: 1px solid #DED9C5;
            border-right: 1px solid #DED9C5;
        }
        
        #hoofdmenu li ul { /* second-level lists */
            display: none;
            position: absolute;
            top: 1.9em;
            left: 0em;
            background: #DED9C5;
            border: 1px solid #000;
            z-index:6;
        }
        
        #hoofdmenu li ul li, #hoofdmenu li ul li ul li { 
            display: block;
            border: 0;
            margin: 4px 0;
        }
        
        #hoofdmenu li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
            top: auto;
            left: auto;
        }
        
        #hoofdmenu li:hover ul, #hoofdmenu li.over ul { /* lists nested under hovered list items */
            display: block;
        }
        
        #hoofdmenu li ul, #hoofdmenu li.under ul {
            position:absolute;
            left:0px;
            display:none;
        }
        #hoofdmenu li:hover ul, li.over ul { 
            display:block;
            z-index:3;
        }
        
        #hoofdmenu ul ul ul, #hoofdmenu li:hover ul ul {
                display:none;
                position: absolute;
                top: -0.5em;
                left: 5.1em;
                background: #DED9C5;
                border: 1px solid #000;
                z-index:7;
        }
        
        #hoofdmenu li:hover ul, #hoofdmenu li:hover li:hover ul {
                display:block;
        }

[ Voor 55% gewijzigd door Foutlook op 14-06-2005 19:40 ]

[Mei]

Heb je de JS wel aangepast voor het 3e submenu? Standaard is het maar voor eentje minder

[André]

Als ik alle overige HTML weghaal werkt het wel goed. Volgens mij sluit je hier en daar een paar elementen niet helemaal goed af

En je kunt je subitems beter een width meegeven zodat je achtergrond ook beter renderd.

[Foutlook]

Mei schreef op dinsdag 14 juni 2005 @ 20:30:
Heb je de JS wel aangepast voor het 3e submenu? Standaard is het maar voor eentje minder

Hm, dat is idd een goeie. Ik ben helaas geen ster in javascript. Waar zou ik wat moeten toevoegen om ook het derde niveau werkende te krijgen dan?

Ik gebruik onderstaande JS code:

JavaScript:

timer1 = 0;
function roll() {
    if (document.getElementById) {
        navRoot = document.getElementById("nav");
        for (i=0; i<navRoot.childNodes.length; i++) {
            node = navRoot.childNodes[i];
            if (node.nodeName=="LI") {
                node.onmouseover=function() {
                    this.className="over";
                    clearTimeout(timer1);
        }
        node.onmouseout=function() {
          under(this);
        }
      }
    }
    }
}

function under(element) {
    el = element;
    timer1 = setTimeout('el.className="under"', 50);
}

[JayVee]

Ik had ook zo een probleem. Het lag uiteindelijk aan de z-index van het menu en wat erachter zat (content of wat dan ook). Kijk daar eens naar! (hier mijn oud topic)

[ Voor 25% gewijzigd door JayVee op 14-06-2005 21:30 ]

[Boelie-Boelie]

Son of Suckerfish dropdowns is een verbeterde variant van de originele ALA-versie. Heeft ook javascript voor een derde niveau.

[KneoK]

Hij werkt in Firefox zeg je, maar als ik met mijn muis over een van de main items ga om een menutje te laten uitklappen en ik ga vervolgens verder naar een volgend item voor een ander menu (blijf dus binnen de hoofdmenu div, ik ga bijvoorbeeld met mijn muis over Het Mosterdzaadje en dan direct door naar Gortelse Dag) dan blijft het vorige menu uitgeklapt.

Hier zie je dus het eerste en tweede niveau van het eerste menu uitgeklapt en ook het tweede menu is uitgeklapt en me pijltje staat nu ergens onderaan de pagina:

[Foutlook]

Boelie-Boelie schreef op dinsdag 14 juni 2005 @ 23:56:
Son of Suckerfish dropdowns is een verbeterde variant van de originele ALA-versie. Heeft ook javascript voor een derde niveau.

Ik had hem al gevonden ja. Bedankt in ieder geval! Ik ga deze maar implementeren...

[Foutlook]

BioWEB schreef op woensdag 15 juni 2005 @ 02:01:
Hij werkt in Firefox zeg je, maar als ik met mijn muis over een van de main items ga om een menutje te laten uitklappen en ik ga vervolgens verder naar een volgend item voor een ander menu (blijf dus binnen de hoofdmenu div, ik ga bijvoorbeeld met mijn muis over Het Mosterdzaadje en dan direct door naar Gortelse Dag) dan blijft het vorige menu uitgeklapt.

Hier zie je dus het eerste en tweede niveau van het eerste menu uitgeklapt en ook het tweede menu is uitgeklapt en me pijltje staat nu ergens onderaan de pagina:

Idd, goed opgemerkt. Dit was nog een to-do puntje Waarschijnlijk is dit ook opgelost als ik bovenstaande oplossing (het aangepaste ALA menu) ga gebruiken. Maar bedankt voor het melden.

[Pelle]

Wij doen hier niet aan support op andermans scripts