Update: For horizontal Suckerfish, see this post.
The ChallengeWhen 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 SolutionsI 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:
WhateverHover: CSS with DHTML Behaviors for IEA 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.
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.