Een menu dat openklapt als je over het bovenliggend navigatie item hovert. Dat is het doel, maar niet altijd eenvoudig te realiseren. Volgende CSS Snippet is een crossbrowser eenvoudig dropdown menu dat met een beetje JavaScript zelf in Internet Explorer 6 werkt.

De CSS pseudo eigenschap :hover werkt in Internet Explorer alleen op de <a> tag, alle andere browsers laten je toe deze eigenschap toe te passen op alle HTML elementen. Met volgende JavaScript oplossingen kun je Internet Explorer 6 deze eigenschap ook toekennen.
:active en :focus zijn niet bekend voor IE6, dit script lost dit eveneens op.

Of je nu CSS of Javascript gebruikt, een achtergrondafbeelding bij een link zal meestal dan pas geladen worden als ze nodig is , bij het hoveren en dit kan soms een vertraging opleveren, en JavaScript preloaden is tegenwoordig geen optie meer.
De oplossing is één afbeelding te gebruiken die alle “states” reeds bevat, en bij hover verander je de afbeelding van plaats, dus geen vertraging meer.

Een crossbrowser navigatie maken is eigenlijk niet zo moeilijk als je maar rekening houd met de verschillen die er zijn. Om de gehele blok te kunnen gebruiken voor de links is de breedte op auto voor de betere browsers, terwijl voor IE6 de breedte op 100% moet worden gezet om alles naar behoren te laten werken.

Je hebt het al gezien, de links gestyld met afbeeldingen die veranderen als je er met de muis over uit gaat (hover).
Het meerdere deel van deze effecten wordt met JavaScript gerealiseerd, en ook is het (als er veel links zijn) nodig om de afbeeldingen te preloaden.
Deze tutorial leert je een techniek waarbij er geen JavaScript en/of preload aan te pas komt.