HTML Dog provide a widely used piece of JavaScript to enable the hover CSS pseudo-class to operate in Internet Explorer. It’s a popular method of applying dropdown menus thanks to its lightweight, standards-compliant, accessible, cross-browser nature.
Their drop-down menu is named the Suckerfish drop-down menu. They’ve now revised ‘Sons of Suckerfish‘ with the better JavaScript and Opera fix.
It’s possible to adapt it to create a floated horizontal solution with images, like the menu at the top of this page. It uses the improved code from Sons of Suckerfish and combined it with some elements of the CSS of the first method to give some nice looking drop-down backgrounds.
Positioniseverything.net’s css-dropdowns is another good CSS - JavaScript hybrid drop-down menu. Gosu.pl have some really nice looking DHTML menus including expanding editable menus. UDM4 also have some great looking menus with images which are also fully accessible to all browsers - including screenreaders, search-engines and text-only browsers.
Some CSS purists have the goal of creating drop-down menus using only CSS that work in Internet Explorer. These always seem to lack features available with the hover p-class, and when IE7 is available the JavaScript used in DHTML menus can be removed.
For a list of sites using drop-downs and other types of navigation menus see the DHTML Menus section.
written by mat
