Navigation drop-downs. Should they be hover or click?

Written by Mike Street on 24th July 2017

(Last updated 2nd January 2018)


Navigation drop-downs, or mega menus as they are sometimes dubbed, are becoming more and more common on the web. A drop-down menu is a navigation block which appears when a link is clicked (or hovered) - a good example of this can be found on the Plumpton College website. 

Animation of a drop down example
On the Plumpton website we use click to activate the drop down menu

Navigation drop-downs are often used to help the user get to lower pages on the site without having to click a trail of links. There are articles on the web detailing usability issues with drop-down menus, however, having a drop-down sometimes makes sense, for example, mega menus perform well. In that case, the next question to ask is - do you have it appear on hover, or do you require the user to click to open the menu?

Our preference at Liquid Light is to have the menu open on click of the navigation link. There are several reasons behind this, ranging from accessibility to user experience. There is an alternative line of thinking for the drop-down to appear when the main navigation link is hovered over - this would allow the navigation link to still be navigated to by clicking and although a simple solution initially, this can cause many problems with accessibility.

Hover does not imply intent

Just because a user is hovering over something, it doesn’t necessarily mean they are intending to actually interact with it. There is nothing more annoying than sweeping your mouse across the screen to access a sidebar, CTA or even the close button and having several menus and drop-downs appearing unexpectedly in your wake.

Continuity between devices

Using hover menus would mean you would need to have a different experience on touch devices (such as tablets). Identifying these devices is not 100% accurate, which means some users on touch devices might not be able to access the mega menus. You may initially think the solution would be small screens having click, but Microsoft released a 28 inch touch screen device - that is nearly as big as the average 33 inch tv in the home.


Hover menus do not allow much room for error. If the drop-down requires you to constantly keep your mouse over the navigation item and its children, then there is more room for error. Being able to click to open a menu and not have that menu disappear until another action is taken allows users to take their time and move the mouse in any direction without the menu disappearing.

Interaction confusion

Many users of the web are used to clicking to interact with something. Clicking links to go to a new page, clicking buttons to submit a form, clicking tabs to reveal more content, clicking stars to submit reviews etc. The natural instinct is to click the link to reveal a drop-down menu (if indicated). If the menu is on hover, this is a break in the interaction flow and expecting the user to use and understand a different motion to use your website. Clicking will also navigate to the page, which can break the users train of thought. This can become confusing and disorientating.

We at Liquid Light are very much in favour of drop-downs being on click. What do you think? If you would like to read more on the topic of drop-down navigation, we’ve collated a few links below.

Further Reading

This article was posted in UX, Development by Mike Street

  • Mike Street

    Mike Street

    Mike is our front-end developer who spends his days buried in CSS and Gulp. His evenings and weekends are spent tinkering with electronics and riding bikes.


How refreshing to read a web-design blog that goes counter to a web-design fad.
Surely most people cause an unintentional Menu on Hover daily?
- Often moving the pointer toward a Browser button.
Extra "work" is required searching for an empty "resting space".

Worst are the occasions when one intends to click a link, perhaps after form-filling - but missing, generating a Hover Menu and clicking within in it, so going elsewhere and possibly losing the form's input.

All this to save flexing one's click finger a millimetre !!!

Please can web-designers stick to the intent demonstrated by a click.
If not ....
.... Can any Browsers disable Hover ????

Jules20/12/2017 21:28

Thank you for your comment Jules! Unfortunately, it wouldn't make sense to have the browser disable hover, it's just down to everyone to make the right choice.

Mike Street02/01/2018 09:18

Thank you, I was just trying to make a decision. I will be going with click.

gloria22/04/2018 19:48

Thanks for the reply.
Unfortunately, too many web designers are declining to "make the right choice" - i.e. intended click menus.
And if some users actually like hover menus - then surely giving Users an option in the Browser would suit everyone ?

For example, most Browsers allow the User to block/disable animations.
Surely hover menus are a form of animation ?

Jules26/09/2018 14:05

You could certainly add an option Jules, that would be a nice touch - however, would you hover or click to get the option menu up ????

It's all about the right tool for the right job. There are certain situations where a hover is the best answer to a menu, but with main navigation we believe click is the way forward

Mike Street09/10/2018 09:24

Was just searching for an extra source to say that click to drop down was a bad idea, and found this to the contrary.

My complaint with drop down menus revolves around the difference in action when you have a top level page that has no children, and a sibling of that page which does. One clicks-to-visit, the other clicks-to-open. A UI shouldn't have something seemingly the same, but acting different.

Similarly, when you're on a touch device with no hover state, all things click-to-open. Some click-again-to-navigate. It's annoying & counter intuitive.

While the hamburger-esque almighty menu button and associated nested navigation have their issues, I'm starting to think that we need to loose nested drop down menus entirely.

Mister27/11/2018 03:48

I love the hover of my websites: or, and can not see any incompatibility issues. In touch style devices such as i-pad and i-phones, the user clicks on the menu item to access the submenu items.
Can you test it with your devices and tell me if your experience is still not 100%?

Steven Du14/03/2019 20:56

I understand your concerns Mister, however with the right signposting and UI this issue would be negated.

As with everything, it is down to preference - we at Liquid Light are in favour of the click-to-open style menu.

Mike Street27/03/2019 08:36

Post a comment

You are currently offline. Some pages or content may fail to load.