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
- There is no use of inline event handlers
Of course, it is Web Standards Compliant and addresses Accessibility Guidelines.
Successfully tested in:
- 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
- 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