Vertical CSS Drop Down Menu

Bookmark this article at these sites:

Check the horizontal version.

About this solution

It has great browser support
It looks the same in most browsers. Yes, you read it right, it doesn't degrade nicely, it just does not degrade at all. Which means - with script support - users have the exact same experience in IE 5.0 (Win and Mac OS9) as they would in modern browsers.
It is script-free
With modern browsers, this menu does not need script support to work.
It is CSS hack-free
Stylesheets do not contain CSS filters.
It is keyboard-friendly
Users can tab from one top level item to another; the enter key (I am using the title attribute to inform users of its purpose) toggles (show/hide) the sub-menus (see taking care of modern browsers when scripting is disabled).
Note that keyboard users cannot skip the sub-menu related to the current page. This is because this sub-menu is exposed to SE (Search Engines) and thus accessible to keyboard users when JS is off.
It is pointing device-friendly
There are no diagonal paths like with horizontal menus and there is a 10px "cushion" all around the sub-menus.
It degrades nicely without script support
In Internet Explorer Win (versions 5 and 6), sub-menus become horizontal and are fully accessible.
It uses semantic markup
The menu is built on nested Lists
It uses non-obtrusive Javascript
There is no use of inline event handlers

Of course, it is Web Standards Compliant and addresses Accessibility Guidelines.

Successfully tested in:

Win
  • Internet Explorer 5.0
  • Internet Explorer 5.5
  • Internet Explorer 6.0
  • Internet Explorer 7 Beta.
  • Mozilla 1.4.1
  • FireBird 0.7
  • Firefox 0.8
  • Firefox 1.5
  • Netscape 7.20
  • Netscape 8.02 Beta
  • Netscape 8.1
  • Opera 8.02
  • Opera 9.0
Mac
  • Internet Explorer 5.0 OS9.
  • Internet Explorer 5.2 OSX.
  • Camino 0.8.2
  • Camino 1.0
  • Camino 1.1a1
  • Safari 1.3
  • Safari 2.0.4 [read this].
  • Mozilla 1.7.3
  • Firefox 1.0
  • Firefox 1.5

This solution may (or may not) work in other browsers, so if you're viewing this page in a UA not listed here, please use our feedback form to let me know and I'll edit this list accordingly.

Other resources related to Menus on this site

This work is licensed under a Creative Commons License

Creative Commons License.