[css] Probleem met menu en z-index

[Zoefff]

Ik heb voor het nieuwe uiterlijk van m'n site een menu gemaakt met behulp van lijsten en wat css, geinspireerd op dit menu.

In FireFox werkt het uitstekend, maar in IE niet. Als je over een uitklapbaar menuitem gaat, dan klapt het wel uit, maar schuift ook de rest van het menu weg. Mijn vermoeden is dat het iets met de z-index te maken heeft, maar ik heb werkelijk álle combinaties al uitgeprobeerd, zonder resultaat.

Een voorbeeld met dit menu kan je hier vinden. De stylesheet staat hier.

Het relevante deel voor het menu is

Cascading Stylesheet:

#menu {
    margin:0px;
    padding:0px; 
}
#menu ul {
    margin:0px;
    padding:0px;
    list-style-type: none;
    clear:left;
}
#menu ul li {
    display: block;
    float: left;
    background-color:#E9E9E9;
    text-align: center;
    width: 119px;
    margin: 0 0 0 0;
    height: 2em;
    line-height: 2em;
    z-index:10;
}
#menu ul li a {
    display: block;
}
#menu ul li a:hover {
    color:#FFFFFF;
    background-color:#CC3300;
    text-decoration:none;
}
#menu ul li:hover {
    z-index:25;

}
#menu ul ul {
    position:relative;
    display:none;
    right:0px;
    top:0px;
    z-index:26;
}
#menu ul li:hover ul ul {   
    display:none;
}
#menu ul li:hover ul{
    display:block;
    z-index:40;
}
#menu ul li:hover li:hover ul {
    display:block;
    border:1px solid black;
}

Het menu is in feite gewoon een list, met id=menu.

Ik hoop echt dat iemand mij hier mee verder kan helpen, want ik zit er al weken mee te stoeien, zonder enig resultaat

[Not Pingu]

#menu ul ul {
position:relative;

position: relative moet absolute worden

en bij #menu moet er een position: relative; bij.

[edit]
Required reading: Suckerfish Dropdowns (ook voor multilevel menu's)

[ Voor 60% gewijzigd door Not Pingu op 31-10-2004 20:18 ]

[X-Lars]

Gunp01nt schreef op 31 oktober 2004 @ 20:09:
#menu ul ul {
position:relative;

position: relative moet absolute worden

en bij #menu moet er een position: relative; bij.

bij #menu ul li { } om precies te zijn

[link removed]

[ Voor 8% gewijzigd door X-Lars op 05-11-2004 10:35 ]

[Zoefff]

Nou, dat levert in IE een helemaal niet werkend menu op, en in FF komt het bovenaan te staan.. Lijkt me niet echt de oplossing dus

[Zoefff]

X-Lars schreef op 31 oktober 2004 @ 20:14:
[...]


bij #menu ul li { } om precies te zijn

http://webpro.nl/dev/cases/zoefff.html

Hm, dat werkt inderdaad al stukken beter

Het enige is dat het bovenste item dan over het menu zelf heen komt, maar dat is opgelost met een margin-top

Thnx man, hier ben ik echt lang mee bezig geweest

[X-Lars]

Het is nog niet perfect nee, maar we gaan ook niet alles voor je doen he

Nog #menu ul li ul { margin-top:2em; } erbij en je bent een heel eind, zie mijn link. Alleen getest op IE6 en FF1

[Zoefff]

Nee, ik moet ook nog even randjes erbij klussen, maar dat moet niet al te lastig zijn. Iig bedankt Gunp01nt en X-Lars, want op die relative/absolute trick was ik volgens mij nooit gekomen

[X-Lars]

Zoefff schreef op 31 oktober 2004 @ 20:20:
[...] die relative/absolute trick [...]

Trick? Wen er maar vast aan, dat is voor het positioneren van je elementen (t.o.v. de viewport en elkaar).

[Zoefff]

Nouja, zo bedoelde ik het ook niet, snap ook wel waar het voor is

Maar het feit dat het in FF wel werkte en in IE niet bracht me een beetje in de war. Vandaar dat het op mij overkomt als een trick

[OnTracK]

laat maar

[ Voor 158% gewijzigd door OnTracK op 31-10-2004 20:56 ]

[AkaXakA]

ligt het aan mij of is een pull _down_ menu aan de onderkant van het scherm onlogisch?

Een pull/pop UP menu werkt toch een stuk prettiger?

[Zoefff]

AkaXakA schreef op 31 oktober 2004 @ 22:11:
ligt het aan mij of is een pull _down_ menu aan de onderkant van het scherm onlogisch?

Een pull/pop UP menu werkt toch een stuk prettiger?

Het staat toch ook bovenaan het scherm?

Merkwaardig, je bent al de 2e die komt klagen dat het menu onderaan staat. Maar na een F5 lijkt het wel op de juiste plaats te staan.

Wiens schuld is dat, van de browser, of van mij?

Er gebeurt nu trouwens wel iets heel raars. Het ziet er in FF 0.9.3 prima uit, todat ik Ctrl + F5 doe. Een aantal div's staan dan niet goed. Als ik weer een andere pagina bezoek, dan is het weer normaal, maar zodra ik Ctrl + F5 doe is het verneukt?

[ Voor 21% gewijzigd door Zoefff op 31-10-2004 22:17 ]