[CSS/Javascript] suckerfish menu valt achter div in FF

[Maverick2001]

Ik heb gebruik gemaakt van het suckerfish menu echter nu is het volgende het geval.

Voorbeeld

In Firefox werkt het menu zoals het hoort echter in IE6 verschuift het menu en valt het ook achter de onderstaande div waardoor het menu niet functioneel is omdat als je over de overlappende div gaat met de muis het menu verdwijnt

Java script:

Cascading Stylesheet:

  <script type="text/javascript"><!--//--><![CDATA[//><!--
timer1 = 0;
function roll() {
    if (document.getElementById) {
        navRoot = document.getElementById("nav1");
        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);
}

//--><!]]></script>[/b] 

CSS:

Cascading Stylesheet:

li {
    float: left;
    position: relative;
    width: 10em;
    text-align: center;
    cursor: default;
    border: 1px solid #5F9347;
    border-width: 1px 0;
}

li#first {
    border-left-width: 1em;
}

li#last {
    border-right-width: 1em;
}

li ul, li.under ul { 
    position:absolute; 
    left:0px; 
    display:none; 

    font-weight: normal;
    background: url(images/ddbg3.gif) bottom left no-repeat;
    padding: 0.5em 0 1em 0;
    border-right: solid 1px #5F9347;
}

li>ul {
    top: auto;
    left: auto;
}

li li {
    display: block;
    float: none;
    background-color: transparent;
    border: 0;
}

li:hover ul, li.over ul {  
    display:block; 
    z-index:3; 
}[/b]

[ Voor 5% gewijzigd door Maverick2001 op 14-09-2005 15:44 ]

[BtM909]

Heb je ergens een werkend voorbeeld online, of een versimpeld stuk wat je hier kan posten?

Code-stukken kan je tussen: [plain][code=js][/code], [code=html][/code] en [code=css][/code][/] zetten . Zie ook: Overzicht van UBB-codes (onderin)

[Maverick2001]

BtM909 schreef op woensdag 14 september 2005 @ 15:29:
Heb je ergens een werkend voorbeeld online, of een versimpeld stuk wat je hier kan posten?

Code-stukken kan je tussen: [plain][code=js][/code], [code=html][/code] en [code=css][/code][/] zetten . Zie ook: Overzicht van UBB-codes (onderin)

Heb mijn start-post ff aangepast (dank voor de tip).

Het werkende voorbeeld staat hier

Alleen wordt daar geen gebruik gemaakt van 2 divs maar is het menu en de text eronder in 1 div verwerkt.

[Maverick2001]

Klein kickje! Kom er niet uit namelijk.

[André]

Ik vermoedt dat het aan de z-index legt, kun je die niet hoger zetten

[Maverick2001]

Hoger?.. hoezo... dat maakt toch geen verschil?

[JayVee]

Zo een probleem had ik ook: [rml][ CSS] Suckerfish menu in gepositioneerde navigatie[/rml]