The problem with CSS dropdown menus

This technique been mentioned in passing for a couple of years now, and recently seems to be gaining a fair amount of attention. Many web designers love the idea of building dropdowns like this. Clean HTML, no Javascript required, what could be better? Well - just shake your mouse around any of these pure CSS menus and you will immediately notice what the problem is. There's no delay between the mouse leaving the active menu area and the area being hidden. It just snaps off. Jolt the cursor or accidentally slip too far to the edge and there's no pause - you immediately lose the whole menu context.

So why does this matter? Well, the simple fact is that many users struggle with dropdown menus on websites, and web designers shouldn't make it even harder for them. From my experiences of usability testing dropdown menu prototypes, I've seen firsthand the difficulties average readers have with this mode of navigating a website, especially when there are multiple levels of menus. A common tendency for users in these situations is to navigate directly to the deeper levels of a site, meaning that they often miss more general information higher up the hierarchy that is more relevant to their task. They become quickly confused about the relationship between the parts and the whole. It's best to save dropdowns for situations where the majority of users are going to be largely familiar with the navigation elements, and will better appreciate the menus reducing visual clutter.

Regardless of your opinions on the above issues, it's clear that the potential benefits and usefulness of dropdowns will immediately evaporate if a technical facet of their implementation has an annoying affect on users. The CSS menus are just that annoying. They switch context too fast for the average user to keep up with and the lack of a delay timeout means that casual slip-ups close the menu unintentionally without giving the user a chance to move the cursor back onto it. Sure - we're only talking about milliseconds here, but this small delay before hiding the menu makes a huge difference to the user experience. Web designers would do well to appreciate such subtleties.