CSS Menus: Create Dropdowns That Work in IE

Update: For horizontal Suckerfish, see this post.

WebLens has undergone yet another facelift. Having never been happy with the previous horizontal menu bar — accomplished with a kludgy Javascript that worked unpredictably — I set out a week ago to replace it with a CSS menu that uses semantically correct HTML. The process is worth sharing here.

The Challenge

When it comes to CSS drop-down and pop-out menus, there's good news and bad news. The good news is that it's absurdly easy to create elegant CSS-based drop-down menus that are standards compliant and cross-browser compatible. The resulting pages are cleaner and more compact. They load faster, are more search engine friendly, and pass W3C validation. The bad news, as usual, lies with Internet Explorer's refusal to play by the rules.

CSS drop-down and pop-out menus are built with nested unordered lists. The drop-down effect is enabled by the ability of standards-compliant browsers to apply the :hover pseudo-class to any element in an HTML document, including list items. Unfortunately, Internet Explorer — which still has a market share of over 90% — does not support :hover on anything but the <A> element. Achieving the drop-down or pop-out effect in IE requires extra measures to make the browser mimic the :hover behaviour.

Three Possible Solutions

I bookmarked dozens of sites in attempting to find a true cross-browser solution for CSS menus — one that works not only in standards-compliant browsers like Firefox, but also in IE, which still sets the standard, whether we like it or not. The techniques I found cluster, essentially, into variations on three fundamental approaches:

Suckerfish: CSS with Javascript Help for IE

One of the first solutions proposed was Patrick Griffiths and Dan Webb's Suckerfish Dropdowns. Elegant in its simplicity, Suckerfish involves using CSS to style a set of nested lists, with a short snippet of Javascript to attach mouseover and mouseout events for IE. Griffiths and Webb's original AListApart article describes the process in clear, straight-forward language and provides code samples you can clone and make your own. Numerous variations of Suckerfish have been proposed, and discussions of solutions to challenges encountered with this approach are ongoing. This is the method I ultimately chose for WebLens.

WhateverHover: CSS with DHTML Behaviors for IE

A similar but — to my mind — more technical approach involves using dynamic HTML behaviors to make Internet Explorer behave itself. This method uses CSS to style drop-down menus for browsers that understand the :hover pseudo-class, with Microsoft conditional comments containing a call to an external HTC file for IE. The technique is explained well by Claire Campbell and Peter Nederlof. Mark Wilton-Jones provides a version for vertical pop-outs.

Stu Nicholls' CSS/HTML Hybrid Solution

Finally, one of my favourite CSS sites provides a novel third approach. Stu Nicholls' CSS Play contains dozens of examples of innovative CSS implementations, including a huge collection of menus. One of these, the Ultimate CSS Only Dropdown Menu, uses CSS together with IE conditional comments and simple HTML tables to style dropdowns that work in both IE and compliant browsers. Nicholls' solution uses just CSS/HTML; no Javascript or IE behaviours.

Note: Nicholls' solution validates, as do the other approaches discussed here, if implemented correctly. WebLens passed the CSS validation easily after including the Suckerfish menu. The new CSS WebLens menu also passes HTML validation, but many of the pages fail because of the embedded ad code, which is not standards compliant.