• Re: Menus
  • CSS Dropdown
  • Current Link
  • Keyboard Special
  • With Images
• Articles: A-D
  • Accesskeys
  • Branching
  • Drop Caps
• Articles: E-K
  • ie C.C.
  • ieMac Bugs
  • Images in Heading
  • Images in Table
• Articles: L-O
  • Location Object
  • Many Layouts
  • Null Links
• Articles: P-S
  • Popup Windows
  • PNG Overlay
  • Scalable Tabs
  • Styling Pullquotes
• Articles: T-Z
  • The Perfect FAQ
  • Tip Method
  • Whitespace

Vertical CSS Drop Down Menu

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.

Successfuly 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

• A keyboard-friendly Accordion Menu .
• The best way to Highlight the current page link.

This work is licensed under a Creative Commons License

.