[Web4lib] CSS Drop Down Menus

[Tom Keays]

I have also been trying to find a pure CSS solution to navigation
menus but I now realize that I was being silly. There is simply no
solution that works in all browsers -- even "modern" ones. The
horizontal CSS menus in Listamatic all have some browser support
issues. From what I've seen, they work much less consistently than CSS
menus oriented vertically.

A book I have been reading, DOM Scripting, rightly (I think) advises
to separate a pages structure, presentation and behavior
(html/css/javascript). It changed my approach to these things.
Ultimately, using Javascript to add functionality (by dynamically
adding and removing display classes rather hoping CSS alone will cover
it) is just the sensible thing to do.

The List Apart article that Keith mentions takes that approach to
mostly good end. However, that design (called Suckerfish in the
article) works on most browsers but not Safari 1.0 (which in November
2003 would have been the current version). In Safari 1.0, the menus
don't position correctly, dropping down from the top left edge of the
screen. I gather that there were display issues in some versions of
Opera too.

This past year, several libraries posted links to their CSS drop down
menus and every single one I looked at exhibited the incorrect
positioning behavior in Safari 1.0 that the 2003 Suckerfish article
mentioned. I was starting to think that these menus were ultimately
not worth it if they couldn't be made to work across the list of
common browsers.

Since then, the authors have gone through a number of iterations to
improve the code and have succeeded very well, I think. Their latest
code now works in Safari 1.0 and Opera and has even added
multiple-levels of menus. (In fact, the new code works in Safari 1.0
even without the Javascript DOM tweaks, but the Javascript only adds a
few extra lines and goes a long way to make these things work
consistently in other older browsers.)

http://www.htmldog.com/articles/suckerfish/dropdowns/