CSS - Overlappende menu's & link selecteren

[dr snuggles]

Ben in CSS een alternatief voor een html "image map" aan het maken.

Ik heb een plaatje met meerdere gebieden: een ketchupfles en een zoutvaatje. Per gebied wordt een menu geactiveerd. Echter, het eerste menu is zo lang, dat dit over het volgende deelgebied heen gaat. Zo kan ik in onderstaand voorbeeld nooit link 9 selecteren:

http://tinker.io/495f7 Hoover met de muis over de ketchup fles.

Heeft iemand een tip hoe dit op te lossen

[P.O. Box]

je zult iets moeten doen met de z-index van de ketchup-fles popup en de z-index van het zoutvaatje...
ik meen me te herinneren dat je ook het position attribute moet gebruiken om een z-index te laten werken... (maar ik kan in de waar zijn met een andere eigenschap)

[_Erikje_]

Je kunt middels javascript een delay op het verdwijnen van de overlay div toepassen.

Vraag jezelf alleen wel af of dit wel goede UX is. Het lijkt me een erg zenuwachtig iets op je website. En < IE8 kan nog wel eens naar gaan doen.

[dr snuggles]

De transition-delay krijg ik niet aan de praat. Lijkt lastiger te implementeren te zijn dan ik dacht.

P.O. Box schreef op maandag 11 februari 2013 @ 16:58:
je zult iets moeten doen met de z-index van de ketchup-fles popup en de z-index van het zoutvaatje...
ik meen me te herinneren dat je ook het position attribute moet gebruiken om een z-index te laten werken... (maar ik kan in de waar zijn met een andere eigenschap)

Z-index heb ik toegevoegd aan area1 van de ketchupfles , werkt perfect! Dank voor je tip.