Hallo iedereen,
Ik was opzoek naar een horizontale dropdownmenu zonder javascript. Ik heb die dan ook gevonden: Voorbeeld, Download.

Nou vind ik die perfect werken, maar ik ben iemand die dan eerst wilt weten hoe het precies in elkaar steekt voor ik het wil gaan gebruiken.
Nou wil ik dat bereiken door de 3 lagen menu te ontleden in 3 versies: 1) alleen een horizontale menu zonder subs 2) menu met subs 3) menu met subs-subs.

Nu ben ik dus begonnen met de horizontale menu alleen: Voorbeeld.
Ik heb die menu dus gestript van alle ander overbodige css en html. En heb nu 2 vragen over waarom de maker van de menu het op die manier heeft gedaan.

(Als je naar de voorbeeld link gaat en dan naar de css pagina zie je de vragen naast het betreffende css gedeelte als comment).

De vraag die ik heb is waarom de maker de z-index gebruikt?
Mijn tweede vraag is waarom de maker het volgende stukje gebruikt:

#menu li:hover > a {
	color: #fff;
	background: #c60;
}



Is het niet al voldoende door de eerder gebruikte stuk?:

#menu li a:hover {
	position: relative;
	z-index: 200; /* Nogmaals waarom een z-index? */
	color: #fff;
	background-color: #c60;
}


Ik hoop dat iemand mij met deze vragen kan helpen en met de rest van de vragen die waarschijnlijk zullen volgen nadat ik de twee lagen menu(menu met subs) ga maken aan de hand van het originele menu.

Alvast bedankt
z-index werkt alleen in combinatie met 'position:absolute;' de waarde die aan z-index wordt gegeven bepaalt in welke laag het element wordt weergegeven. Hoe hoger de waarde / hoe hoger de laag. De hoogste laag overlapt onderliggende lagen.

z-index:200; wordt hier gebruikt om er voor te zorgen dat jouw menu de rest overlapt en niet andersom?

waarom er bij jou position:relative wordt gebruikt icm z-index dat weet ik niet .. volgens mij kan je die 2 stukjes code beter weggooien

z-index werkt alleen in combinatie met 'position:absolute;' de waarde die aan z-index wordt gegeven bepaalt in welke laag het element wordt weergegeven. Hoe hoger de waarde / hoe hoger de laag. De hoogste laag overlapt onderliggende lagen.

Dat wist ik al. Ik dacht alleen dat er een speciale reden voor was dat het dus 200 was. Als je geen z-index instelt zou het ook gewoon moeten werken. Misschien toch dan alleen in speciale gevallen dat je dan een z-index moet instellen.

Hmm, heb even opnieuw gegoogled met keywords: relative z-index en ik kwam onder andere uit op: http://annevankesteren.nl/2005/06/z-index . Nou begrijp ik alleen dat er een of andere bug in ie zit en dat het gebruik maken van relative en z-index het probleem verhelpt.

Ik ben ook trouwens tegen een mogenlijke reden voor het plaatsen van een z-index. Misschien is het zo dat wanneer er geen z-index wordt gebruikt. Dat het de content naar beneden duwt wanneer er een dropdown-menu is. Dus inplaats van gewoon over de content te zwefen. Ik moet even gaan testen om te zien of dit zo is.

edit:
Hmm, denk dat ik de z-index weghaal en als ik dan ooit problemen merk met overlapping enz kan ik het alsnog toevoegen.
Daar zou je best wel eens gelijk in kunnen hebben van die bug-fix.
het voorbeeld waar jij mee begonnen bent werkt bij mij niet. Er dropt niets down.

Jha het was de bedoeling dat er niks naar beneden dropte. Wil eerst de basic van het css door hebben voordat ik verder ga met een menu die dan wel subs kan krijgen.

Reageren