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 heirachy that is relevant to their task. They become quickly confused about the relationship between the parts and the whole. I should point out that I am totally aware that many people have had much more positive results with usability testing dropdown menu navigation - I can only speak from my own testing experiences, most notably in relation to one particularly large information site, where the menu system consistently led to confusion. 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 break the verisimilitude of the interface. 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.