Dropdown low down

By John Faulds

Dropdowns (horizontal) or flyout (vertical) menus abound on websites and come in many different flavours. They are also put together in a number of different ways, some done with javascript, some with 'pure' CSS and some a mixture of both.

They also have varying degrees of usability and accessibility. Some are completely inaccessible to those who can't use a mouse (i.e., use their keyboard to navigate), for some only the top level menu items are accessible and others give you keyboard access to the whole menu.

Then there are ones that either won't work at all or provide limited functionality if javascript is disabled.

So which is the ideal dropdown menu system to use on your website and why?

In an attempt to answer this question, I've put together a list of some of the menu systems I've come across and made some comments as to their different features. I only say 'attempt' because I don't actually believe there exists a dropdown menu that doesn't fall down in some way, that won't restrict a certain section of users under certain conditions.

I'm mainly concerned with the menus usability, so the criteria I've used to assess them are:

  • Semantic code – no unnecessary markup. By this I mean that, from a semantic point of view, extra markup required to achieve functionality has nothing really to do with describing the content.
  • Keyboard accessibility – being able to access the submenu items without a mouse.
  • Will work with javascript disabled.

Although in some cases I've highlighted things like code weight, ease of implementation and price, in most cases they don't affect a user's experience, so those factors don't really have a bearing on my personal view that the 'perfect' dropdown doesn't really exist.

If anyone has examples of other dropdown menus that they know of, feel free to mention them in the comments.

Also, please note that the number of 'pros' or 'cons' listed with each menu does not constitute a rating of how good the menu is or how it compares with the other menus on the list. Neither does the order in which they appear below. The only determining factor affecting the order really is that the free ones are first, followed by the semi-free ones and the paid ones last.

While this article may appear to advocate some menus over the others, my aim was more to present a list of options alongside a checklist of the sort of things you should look for when choosing a menu. The rest, of course, is up to you and I hope people will take the time to check out the examples and read a bit about them before making a choice.

  1. Sons of Suckerfish

    Originally published on A List Apart, and then updated on HTML Dog, Suckerfish dropdowns are widely used, due in part to their relatively easy implementation.

    Pros

    • Free.
    • No unnecessary markup.
    • Dropdowns work if javascript is disabled*.
    • Easy to set up and customise.
    • Commonly used so if you run into trouble, you'll find lots of people able to help with problems.

    Cons

    • Submenu items are inaccessible to keyboard-only users.
    • *The dropdowns also won't work in IE<=6 with javascript disabled due to their inability to handle :hover on non-pseudo elements.
  2. PIE's Deluxe CSS Dropdowns and Flyouts

    This is similar to the Suckerfish menu but introduces "sticky hovering zones" which ensure that the submenus stay open when moving between different levels (something which can sometimes be an issue with the Suckerfish menu). The trade-off is more (and from the point of view of pure semantics) unnecessary markup and slightly more complex CSS.

    Pros

    • Free.
    • Dropdowns work if javascript is disabled*.
    • Better 'stickiness' of menus (submenus won't disappear before you have time to mouse over them).

    Cons

    • Unnecessary markup.
    • *The same problems that affect Suckerfish with regards keyboard access and javascript being disabled apply here too. This menu does provide a better noscript fallback than Suckerfish though – all submenus become expanded in IE<=6/Win and IE5/Mac which depending on the complexity of your menu, may not actually be desirable.
  3. Keyboard Accessible Suckerfish

    As pointed out by Helena Boylen in the comments, Matthew Carroll has developed a modification of the Suckerfish menu which makes the submenus keyboard accessible.

    With javascript off, standards compliant browsers still have keyboard access to the submenus, but only the currently focused menu item and any sub-menu beneath it are shown. IE7 will let you tab through the submenu items, but there are no visual cues as with other modern browsers.

    IE<=6 still behaves the same as the original Suckerfish.

    Pros

    • Free.
    • No unnecessary markup.
    • Dropdowns work in non-IE browsers if javascript is disabled.
    • Submenu items are keyboard accessible.
    • Easy to set up and customise.

    Cons

    • Very slight display discrepancy in most modern browsers if javascript is off.
    • The dropdowns won't work in IE<=6 with javascript disabled.
  4. Sons of Ursidae

    Another variant of the Suckerfish menu whose main point of difference appears to be that you can easily switch from a horizontal to a vertical menu by just un/commenting a small set of the rules (rather than having to write a lot of new code as in the original Suckerfish). Also, by removing the width from the <ul> and <li> elements you can have different widths for the top level items without needing to attach classes or IDs to them.

    Keyboard access of the submenus is only available in Mozilla and Firefox and IE5.5 up to 7 and when tabbing through the menus, they become separated from their parent menu item which makes it a bit confusing to work out where you are in the menu.

    Pros

    • Free.
    • No unnecessary markup.
    • Dropdowns work in non-IE browsers if javascript is disabled.
    • Easy to switch between horizontal and vertical menus.
    • Easily create different width menus.

    Cons

    • Submenus only keyboard accessible (with some limitations) in Firefox, Mozilla and IE5.5-7.
    • The dropdowns won't work in IE<=6 with javascript disabled.
  5. FatFish

    Alexander Farkas has come up with another keyboard accessible Suckerfish variant which uses jQuery for some added javascript effects like fading in and out.

    The menu also works for both mouse and keyboard with javascript off in modern browsers. Using the keyboard, only the submenu item you're currently on is displayed on screen when javascript is off, rather than the whole submenu being shown. This can make it a bit difficult to tell exactly what level you're at as the links are separated from their parental context, but it's better than no on-screen display at all.

    The menu also works in IE6 for keyboard users with javascript off in the same way and there is an alternative fallback for IE6 which lets you expand the submenu fully on screen instead.

    Alexander is German so the description of the menu in English is quite brief (the German version is more comprehensive) and there were a couple of things I was unsure about, like why each submenu item has <span class="sbh">. </span> in the code (which is hidden from the screen).

    Pros

    • Free.
    • Dropdowns work if javascript is disabled.
    • Submenu items are keyboard accessible.
    • Easy to implement.

    Cons

    • Display of submenu items for keyboard users when javascript is off could be a bit confusing.
    • Some additional (perhaps unnecessary) markup.
    • The majority of the description and comments are in German.
  6. Superfish

    Another menu that combines jQuery with Suckerfish, Superfish by Joel Birch, currently at version 1.3.3, features time delay on mouseout to be more forgiving of mouse-piloting errors, animation of submenus and is keyboard accessible (when javascript is enabled).

    The examples include horizontal and vertical variants and a horizontal menu with horiztonal submenus. There's also a built-in fix for the dropdowns falling over select elements in IE6 and the ability to have the submenus that show the path to your current page remain open while the menu is idle.

    Pros

    • Free.
    • Dropdowns work if javascript is disabled (except in IE<=6).
    • Submenu items are keyboard accessible.
    • Easy to implement.

    Cons

    • Submenu items aren't displayed on screen when tabbed into with javascript off.
    • The dropdowns won't work in IE<=6 with javascript disabled.
  7. Project VII CSS Express Drop-Down Menus

    Project VII provide this free menu on their site which has pretty much the same functionality as the Suckerfish menu.

    See below for commercial examples with better keyboard accessibility features.

    Pros

    • Free.
    • No unnecessary markup.
    • Dropdowns work if javascript is disabled*.
    • Easy to set up and customise.

    Cons

    • Submenu items are inaccessible to keyboard-only users.
    • *The dropdowns also won't work in IE<=6 with javascript disabled due to their inability to handle :hover on non-pseudo elements.
  8. CSS Play dropdowns

    Stu Nicholls has worked on numerous examples of his CSS-only menus over the last year or so (the most recent one linked above). Their main advantage is that they require no javascript to work in IE<=6 which means that these dropdowns will always function when javascript is disabled.

    The downside is that to do so, the HTML makes use of IE conditional comments and table tags. The dropdowns are also not keyboard accessible.

    Pros

    • You don't have to pay for it, although permission must be obtained for commercial use and a donation is welcomed.
    • A variety of different configurations.
    • Dropdowns work if javascript is disabled.*

    Cons

    • Unnecessary markup.
    • *Although no javascript is required, a mix of IE conditional comments and table tags is.
    • Submenu items are inaccessible to keyboard-only users.
  9. FreeStyle Menus

    As pointed out by John Lascurettes in the comments, FreeStyle Menus is a keyboard accessible menu with added javascript animated fade effects.

    Using javascript instead of :hover for controlling the submenus means that they are more usable and won't disappear as easily when moving around the menus.

    While it does have better accessibility features than the original Suckerfish with javascript on, with it off, however, it actually becomes less accessible because you can't access the submenus via keyboard or mouse in any browser. (With javascript off, the menu falls back to CSS for presentation.)

    Pros

    • Free, although a donation is requested if you want to remove the credit link.
    • No unnecessary markup.
    • Dropdowns are generally more usable without menus disappearing too soon.
    • Submenu items are keyboard accessible.
    • Javascript fading effects.
    • Will work in older (v4+) browsers.

    Cons

    • The dropdowns won't work in any browser with javascript disabled.
    • CSS and javascript may be complicated to customise although the download files are well commented.
  10. TJKDesign's Pure CSS Dropdown Menus

    Thierry Koblenz has updated his menu to give it a better 'look' while also improving its usability accessibility aspects.

    There are two versions: horizontal and vertical. Both menus are actually horizontal in that the top level menu items display horizontally, but the difference is the orientation of the submenus. The menus work slightly differently as they are designed to address different issues which are mentioned in the article.

    The vertical menu has better keyboard support in that you don't have to tab through all the submenu links before reaching the next top level menu item (except for the submenu items of the top level list item of the page you're currently on).

    The dropdowns will work for a mouse user with javascript disabled, but not for keyboard users (except, again, of the list item of the current page you're on).

    The dropdowns also won't work in IE<=6 if javascript is disabled but Thierry has instituted a clever fallback whereby the menu reverts to having the submenus display horizontally below the top level nav.

    Pros

    • You don't have to pay for it, although the Creative Commons licence it uses states it cannot be used commercially.
    • No unnecessary markup.
    • Keyboard navigable using the tab key.
    • Care has been taken to ensure menus don't disappear too quickly when moving between levels.
    • Dropdowns work if javascript is disabled*.

    Cons

    • Quite complicated CSS.
    • *Dropdowns won't work in IE<=6 with javascript off, but there is a workable fallback.
  11. Menu Déroulant Accessible - Partie 2

    Aurélien Levy brings us part 2 of his dropdown menu. The behaviour of this menu is driven completely by javascript. If javascript is disabled, the whole menu is completely expanded, so some care would need to be taken with your design to make allowances for this. The submenus also appear completely expanded for an instant on first load of the page.

    The submenu links can be accessed via the keyboard and when first tabbing into the submenu, a hidden skip link appears which enables you to bypass that submenu and move along to the next top level link.

    The menu doesn't work quite the same in IE with you having to hit tab twice on each top level link to get to the submenu.

    Please note that the article accompanying this example is in French.

    Pros

    • Free.
    • No unnecessary markup.
    • Keyboard navigable using the tab key.
    • Skip link added to each submenu so you don't have to tab through all the links if you don't want to.

    Cons

    • CSS contains quite a lot of hacks for IE5+ browsers which probably would be better moved to conditional comments.
    • Submenus appear completely expanded for an instant on page load.
    • You need to hit tab twice on the top level links to access submenus in IE.
    • Dropdowns won't work with javascript off, but there is a workable fallback.
  12. Easymenu

    This has similar functionality to the one above but with much less complicated CSS and javascript. Implementation seems to fairly easy.

    The site doesn't appear to have been updated in a while because its list of supported browsers ends at IE6 and Opera 7.11 but the menu does work in Firefox 2.0, IE7 and Opera 9.02.

    Pros

    • Free (if you don't mind linking back otherwise a donation is requested).
    • No unnecessary markup.
    • Submenu items are keyboard accessible.

    Cons

    • Submenus won't work with javascript disabled, however, with javascript off, the whole menu is expanded and you can provide different styles for javascript on or off.
  13. Keyboard Accessible Dropdown Menu, Part Deux

    Another fairly straightforward implementation that uses javascript to provide a little extra useability with a mouse delay which means you can slip off the menu momentarily without losing your place.

    Pros

    • Free.
    • No unnecessary markup.
    • Submenu items are keyboard accessible.
    • You can have an infinite level of submenus (a change is required to the IE6 stylesheet).
    • Care has been taken to ensure menus don't disappear too quickly when moving between levels.

    Cons

    • Submenus are still accessible by keyboard if javascript is turned off but highlighting varies between browers. In IE6 and 7 there is no highlighting, in IE8, Firefox and Opera only the current item is highlighted (Opera exhibits this behaviour with javascript on too). Firefox will also expand the contents of all child submenus when first tabbing into a parent, before reverting to only showing the currently selected submenu item.
  14. Project VII's Pop Menu Magic

    The difference between this menu and the previous PVII example is that this one makes much more use of javascript which means it is accessible to keyboard users, can detect the edge of the window and reposition submenus accordingly and provides fade in/out effects.

    The downside is, of course, that without javascript, the menu actually becomes less usable then the previous example.

    Update: As Al Sparber has pointed out in the comments, there is an article on their site outlining how to to build an accessible site around this menu.

    Pros

    • No unnecessary markup.
    • Submenu items are keyboard accessible.
    • Other javascript enhanced effects like window detection, submenus fading in and out.

    Cons

    • Not free.
    • Dropdowns don't work with the mouse without javascript. The submenu items are still accessible via the keyboard, but like the UDM4 example, on the status bar gives you an indication of where you are.
  15. Smartmenus

    Smartmenus appears to be fairly new on the scene (judging by the fact that their 'Online Samples' page is still under construction) and combines the functionality of Easymenu and PVII's Pop Menu Magic.

    The menu is accessible via the keyboard using the tab key and interestingly, works in IE with javascript disabled. I say interestingly because in Firefox with javascript off the menu behaves like the Easymenu example and becomes completely expanded. There also doesn't appear to be any documentation as to whether this expanded form can be styled in any way.

    Pros

    • No unnecessary markup.
    • Submenu items are keyboard accessible.
    • Menu works in IE with javascript disabled.*
    • Other javascript enhanced effects like window detection and repositioning of submenus.

    Cons

    • Not free.
    • *Menu loses all styling and structure with javascript disabled in other browsers like Firefox and Opera.
  16. Ultimate Drop Down Menu

    This menu is probably about the best there is when it comes to advanced usability and accessibility features including keyboard navigation. Not only can you tab into all links, but you can use the up and down arrow keys to move between items on the same level and use left and right to keys to move between levels.

    This menu claims WAI Triple-A and Section 508 conformance and boasts impressive browser support.

    Pros

    • The best keyboard support of any menu I looked at.
    • Also seems to be able to lay claim to being the most accessible dropdown menu available.

    Cons

    • Not free.
    • Dropdowns don't work with the mouse without javascript. You can, however, still access them using the tab key although there are no visual cues apart from the URL in the status bar to indicate which link you're on.
  17. Milonic

    Milonic menus are old school DTHML menus, in other words, completely javascript-driven. This means that links don't actually appear in the HTML which creates problems for search engines spidering your site and for people using assistive technologies who may not be able to access any of the links. They are keyboard accessible but if javascript is disabled, you get nothing unless adding a noscript fallback to your page which ultimately leads to greater code weight.

    Pros

    • Free unless for commercial use.
    • Submenus are keyboard accessible.

    Cons

    • No HTML markup.
    • Completely javascript-driven.
    • Menu disappears with javascript disabled unless noscript fallback is provided.
  18. Sothink

    More javascript-only menus but without the keyboard accessibility although they do seem to have more javascript effects than Milonic. Again, no menus at all without javascript.

    Pros

    • Different effects like scrolling within submenus.

    Cons

    • Not free.
    • No HTML markup.
    • Where HTML is used it appears to be table-based and largely invalid.
    • Completely javascript-driven.
    • Submenus inaccessible by the keyboard.
    • Menu disappears with javascript disabled unless noscript fallback is provided.
  19. AllWebMenus

    AllWebMenus feature some very snazzy examples (including a replica of Windows Start menu) but from a usability point of view, they're almost identical to those of Sothink and Xtreeme.

    Pros

    • Different javascript effects.

    Cons

    • Not free.
    • No HTML markup.
    • Completely javascript-driven.
    • Submenus inaccessible by the keyboard.
    • Menu disappears in most cases with javascript disabled.
  20. Xtreeme

    Another javascript-driven menu but this one mixes javascript and tabled-based HTML markup (which does mean that the menu is still viewable if javascript is turned off).

    Pros

    • More javascript effects like transparency and fading.

    Cons

    • Not free.
    • Table-based markup.
    • HTML and javascript mixed.
    • Submenus inaccessible by the keyboard.
    • Submenus won't work without javascript.
  21. Apycom

    Apycom's menus are Java driven which means from an animation point of view, they can do more than any CSS or javascript solution. Of course, not everyone has Java installed and the same problems with regards there being no HTML in the page also applies although these menus will still function if javascript is off.

    Pros

    • A variety of animation effects.

    Cons

    • Not free.
    • No HTML markup.
    • Completely Java-driven.
    • Submenus inaccessible by the keyboard.
  22. ThinkHTML menu

    Updated: 22 September 2009

    This is a brand-new CSS-only menu by Timo Huovinen which doesn't require any javascript (even for older versions of IE), and also supports tabbing via the keyboard.

    Timo received some tips from Paul O'Brien via a contest held at Sitepoint after having developed an initial version of the menu and now the menu seems to meet all the criteria I laid out at the beginning of the article making it the only completely CSS dropdown menu with semantic markup.

    Pros

    • Free.
    • Works in all browsers using only CSS without browser-specific HTML.
    • Completely valid HTML/CSS (semantically correct HTML) without any IE hacks.
    • Natural tabbing.

    Cons

    • Width of the dropdowns has to be fixed.