When used well, drop-down menus should help users to navigate more effectively. 

They allow easy access to various sections of a website, and allow designers to tidy up busy layouts. 

In this post I want to look at how drop-downs should be activated. Is it better that users open menus by mousing over them, or by a click?

Hover or click: pros and cons

I did float this question on Twitter recently and received a range of answers, though perhaps hover was slightly favoured, at least for desktop. 

I’m looking from a desktop perspective here, and these are the pros and cons of each approach as I see them. 

Hover

Pros: 

  • It’s easier, less work for the user to activate the menu. 
  • Most sites use this, so it’s what users expect. In fact I struggled to find an example that was clickable. 
  • It allows users to navigate more quickly. 

Cons: 

  • Easy (and irritating) to activate by accident. 
  • Can be hard to close big menus. 
  • Can be too easy to mouse away and lose the menu. 
  • Items close to the edges of the menu are harder to click, as it’s easy to mouse away from the menu. 

Click

Pros: 

  • Avoids accidental user activation. 
  • Lets the user decide whether to open the menu. 
  • Harder to close by mistake. 

Cons: 

  • People may expect to navigate to the category page, not open a menu. 
  • The time delay in activating and closing may interrupt the user journey. 

Examples of drop-down menu activation

ASOS

The drop-down operates when users hover the mouse over the label. It is deactivated when the cursor is moved out of that area. 

The menu, though it contains plenty of links, is super-massive, so it’s easy to get rid of, and not too hard to trigger accidentally. 

House of Fraser

This is activated by hovering and has several levels.

While a smaller menu may be harder to use, the size of these menus means that accidentally clicking away from the menu is hard to do. 

Google

Google’s small drop-downs are clickable. This makes sense with smaller menus as they remain on screen wherever you move the cursor. 

Econsultancy

Our drop-down menus are pretty big, and were initially activated by hovering when we relaunched the site

However, we felt that the ease of activation of such a big menu and the subsequent difficulty in moving the cursor away from the menu area was a UX problem. 

So, we have made the menus clickable: 

This has solved the accidental activation issue, but has it caused other problems?

For example, do users who click on the ‘blog’ link on the navigation bar expect to be taken to the blog page rather than to open a menu? 

Is there a better way to solve this problem, or have we got it more or less right? 

We’re looking at making more changes to the drop-downs (and elsewhere), but would love to hear your thoughts….