Going back and forth with product on this one. Should you -

A. Have to click outside of the dropdown (anywhere on screen)


B. Have to simply stop hovering the dropdown for x number of seconds? (in our case, let's use 2 for example)

To have the dropdown list hide and only show the button?

I strongly feel that B is more cross-browser and device compatible and keeps from having mobile devices lock in a dropdown screen.


  • Hi @PW! Welcome to the UX.Stack. Is creating a separate interaction for devices without mouse input an option? Or do you have the constraint of using the same interaction across device types? – Graham Herrli Jan 22 '14 at 4:26
  • 1
    Also, when you say that you "feel B is more cross-browser and device compatible" is it possible that that's a typo and you mean to say that A is? (On a device where you can't hover, stopping hovering [i.e. Option B] wouldn't work as a solution and could cause the "lock" that you mention.) – Graham Herrli Jan 22 '14 at 4:27
  • I should have been more clear but I am talking about custom dropdowns not native select elements, where they appear the same cross browser. By using hover they disappear after five seconds – PW Kad Jan 22 '14 at 13:25

I'd say it depends on how you opened the dropdown. If you clicked on a button then it'd be better to click somewhere else to close it. Otherwise if you simply hovered an element to show the dropdown, moving your mouse out should close it.

The next question would be "So, it is better to open a dropdown on click or hover ?". I think main navigation (with a dropdown) are usually opened on mouse over. If you think your user should access quickly to the dropdown use the hover trick (but it also depends of the dropdown's nature).

  • 1
    Actually drop downs (drop down on hover) are a major annoyance (to me anyway) and should all be pull downs (click pulls it down) like menu's in desktop applications all are. In the beginning of GUI development there were different GUI managers (Windows being just one). Some had drop down menu's others had pull down menu's. Luckily the pull down versions won out. Why luckily? Because drop downs interfere with mouse movement over the menu's target area when the menu's target area isn't the mouse's final destination. That's why any (mega) menu should have a sensible delay before dropping down... – Marjan Venema Jan 22 '14 at 19:05
  • @MarjanVenema sure, you're absolutely right ! – Gabin Jan 23 '14 at 7:25

For mobile devices / tablets there is no "hover" state, so if you're going for maximum cross-device compatibility the dropdown should open when "pressed" and close when a press is detected both inside and outside the dropdown.

This makes the assumption that whatever you're "pressing" to open the dropdown is not a direct link to another page: For website menus that work cross-platform a common pattern is to ensure the main menu items that don't have drop-downs are links directly to the section, and those main menu items that do have drop-downs function simply to reveal or hide the associated drop-down.

In the example below from the Twitter Bootstrap website you will see that "home, link, link" are direct navigation links, and "dropdown" opens a drop-down.

An example from the twitter bootstrap website


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.