CSS Dropdowns Part 1: The 2 Big Problems With CSS Dropdowns

• Jonathan
• 19th Jul 2010
• Accessibility, CSS, Usability

Back in 2004 I think, when I first learned to create dropdown menus with nothing more than CSS and some nested HTML, I was amazed. I’d never considered before that CSS could be used for anything but the most basic of front-end styling and functionality.

Early in my career however, I quickly realised that there were two major issues with the way that CSS dropdowns worked.

These days I rarely create pure CSS dropdowns, unless some strange series of events means I have no choice. And yet all over the web I see them more and more. Has no one else realised the problems these menus present to users?

Problem 1: Usability

How many times have you had your mouse over a dropdown and accidentally moved it off the menu area, resulting in the dropdown disappearing?

The culprit is the :hover pseudo-class of course, because the dropdown will only appear when the mouse is hovering over its parent. Move the mouse off and the hover ends, hiding the menu.

People often aren’t the most co-ordinated bunch, and will often move the mouse quite fast, so requiring that they keep the mouse pointer in a precise area the whole time isn’t really fair.

Also, remember that dropdowns are often larger than their parent, so the path the user’s mouse takes may often leave the hover area for a fraction of a section on the way to the desired part of the dropdown. It may even pass through another menu item with its own dropdown.

Unfortunately, a fraction of a second is all it will take for the hover to end, and you’ll probably be left with a rather annoyed user.

In the image above I’ve tried to click on the ‘Small & Electrical Appliances’ link in the ‘Rooms’ sub-menu, but moving my mouse in a direct line has left the ‘Rooms’ tab (closing its dropdown) and passed through the ‘Decor’ tab. So I end up with ‘Premium Tile Collection’ instead.

Note: I’m picking on the B&Q website in this article because, while their website isn’t too bad, their dropdown has annoyed me in the past.

Looking at it another way

The flip side is the undesired appearance of a dropdown.

If the user moves their mouse from one area of the page to another, passing through a menu item with a dropdown, then the dropdown will appear.

For example, if on the B&Q website your cursor is in the header area, and you wish to click on the ‘Outdoors’ tab of the homepage slider, your mouse will have to pass through the menu, triggering the ‘Garden’ dropdown.

At the very least the unexpected appearance of the sub-menu will distract the user, and at worst the dropdown may obscure the object of the user’s focus which, again, will annoy them.

Problem 2: Accessibility

Coming back to my point about precise positioning of the mouse to trigger and maintain the dropdown, I once knew a guy with cerebral palsy who told me that dropdowns really pissed him off.

Because the use of his hands was affected he found it difficult to accurately position the mouse all the time, so when trying to move the cursor from one part of a menu to a dropdown the mouse would often leave the hover area.

So when I was making a website for a charity he worked for, which helps disabled people, I was told in no uncertain terms that dropdown navigation was a big no-no because disabled users would be the main audience.

A more standard site may be proportionately less likely to have disabled users, but because you don’t know for sure it’s best to err on the side of caution, and bear this sort of thing in mind.

Not just a CSS problem

Of course these aren’t limited to CSS dropdowns, Javascript-based menus often have the same issues, but at least with Javascript you’ve got more control over the behaviour of the menu when dealing with user interaction.

So what to do about it?

Dropdowns aren’t necessarily evil. In fact usability guru Jakob Nielsen is all in favour of so called ‘mega dropdowns’ – as long as they’re done right, that is.

You can read more about his opinion on dropdowns here, but the basics are:

1. A dropdown should only appear if the user wants it to i.e. their mouse must be on the hover target area for enough time to signify this – 0.5s recommended.
2. The dropdown should appear quickly so the user is not kept waiting – 0.1s recommended.
3. The dropdown should not disappear instantly if the user takes their mouse off it – wait 0.5s.
4. When hiding the dropdown it should disappear quickly – 0.1s again.

Unfortunately, the basic CSS hover functionality doesn’t let us do this.

A solution

So tomorrow in part 2, I’m going to share with you a great little jQuery plugin I’ve written which is perfect for dropdowns in two ways:

1. It makes it easy to meet Jakob Nielsen’s suggestions above.
2. You can use whatever markup you like – you’re not limited to unordered lists.

And in part 3 the day after I’ll be showing you something even better!

So see you tomorrow, happy coding.

Spread the word

If you like what you've read, help spread the word on Twitter, Digg, or any of your favourite social sites. Knowledge is power.

About the author

Jonathan Phillips is the founder and main author here on Division by Zero. A PHP developer by trade, Jonathan spends his days building and marketing websites and the rest of the time coming up with ideas for websites and businesses he hasn't got time to implement.