[CSS] Submenu (layer) wordt niet weergegeven

[TwoR]

Hoi, Ik zit met een vervelend probleem. Ik heb een site gemaakt met een hoofdmenu en daaronder een submenu wat uitklapt als je over een hoofdmenu item gaat.
In Firefox werkt het perfect alleen in IE wordt het submenu nooit zichtbaar.

De site vind je hier

Onder oplossingen en markten zit een submenu. Onder oplossingen staat het submenu standaard open. Bij de andere wordt het door middel van JS open gezet.

De style sheet die hierbij hoort is:

Cascading Stylesheet:

#submenu1{
    top: 102px;
    left: 167px;
    position: absolute;
    
    z-index: 50;
}

#submenu2{
    top: 102px;
    left: 290px;
    position: absolute;
    visibility: hidden;
    z-index: 50;
}

Onmouse over wordt het submenu 'opengeklapt' met de volgende JS code:

JavaScript:

function ShowSubMenu(submenu){
        var submenu;
        
        document.getElementById('submenu1').style.visibility = 'hidden';
        document.getElementById('submenu2').style.visibility = 'hidden';
        
      document.getElementById(submenu).style.visibility = 'visible';
    
}

Persoonlijk denk ik dat het in de CSS zit om dat het eerste menu standaard zichtbaar zou moeten zijn.

Wie heeft nog enig idee wat ik verkeerd doe?

[crisp]

z-index bug van IE; je contentcontainer komt er overheen te vallen.
Verplaats je submenu's naar je container div, of zorg dat je geen positioning gebruikt op je header div.
Sowieso zou ik zoveel mogelijk absolute positioning proberen te voorkomen; het is gewoon beter om zoveel mogelijk 'in de flow' te houden.

Overigens zijn er nettere manieren om dergelijke submenu's te maken, zowel qua markup als qua scripting

[ Voor 23% gewijzigd door crisp op 22-09-2005 12:12 ]

[TwoR]

crisp schreef op donderdag 22 september 2005 @ 12:09:
z-index bug van IE; je contentcontainer komt er overheen te vallen.

Aha vandaar.

Verplaats je submenu's naar je container div, of zorg dat je geen positioning gebruikt op je header div.

Hoe bedoel je de submenu's verplaatsen naar de container div?

Sowieso zou ik zoveel mogelijk absolute positioning proberen te voorkomen; het is gewoon beter om zoveel mogelijk 'in de flow' te houden.

Zal ik eens proberen bij mij komt het dan altijd verkeerd te staan.

Overigens zijn er nettere manieren om dergelijke submenu's te maken, zowel qua markup als qua scripting

Ik weet dat er nettere manieren zijn maar het moest even snel als voorbeeld. Maar uiteindelijk duurt het alleen maar langer

[crisp]

TwoR schreef op donderdag 22 september 2005 @ 14:00:
Hoe bedoel je de submenu's verplaatsen naar de container div?

Je hebt nu:

HTML:

<div id="container">
    <div id="header">
        ...
        <div id="submenu1"></div>
        <div id="submenu2"></div>
    </div>
    <div id="contentcontainer"
    ...
    </div>
</div>

IE honoreerd alleen de z-index voor elementen met dezelfde offsetParent, dus als je zoiets doet:

HTML:

<div id="container">
    <div id="header">
        ...
    </div>
    <div id="submenu1"></div>
    <div id="submenu2"></div>
    <div id="contentcontainer"
    ...
    </div>
</div>

dan bereik je dat

[TwoR]

crisp schreef op donderdag 22 september 2005 @ 14:07:
[...]

Je hebt nu:

HTML:

<div id="container">
    <div id="header">
        ...
        <div id="submenu1"></div>
        <div id="submenu2"></div>
    </div>
    <div id="contentcontainer"
    ...
    </div>
</div>

IE honoreerd alleen de z-index voor elementen met dezelfde offsetParent, dus als je zoiets doet:

HTML:

<div id="container">
    <div id="header">
        ...
    </div>
    <div id="submenu1"></div>
    <div id="submenu2"></div>
    <div id="contentcontainer"
    ...
    </div>
</div>

dan bereik je dat

mmmm, het blijft hetzelfde bij mij ook als ik de submenu's verplaats.

* TwoR gaat weer even verder.