enter image description hereMy query is for Web - Desktop.
I have a list of 6 items in the primary header. Out of which 2 items needs to be functional on click and on mouse hover. Rest 4 are functional on click only.


|| - An affordance(usually a downward arrow) to feel the Onhover function

Option 1,2,5&6 have Onclick function, Option 3&4 have both Onhover and Onclick functions.

How to effectively communicate this? Currently users tend to believe that either the menu item is functional on hover or on click. But not both. This is what I have found with Usability Testing.

  • Please explain question in detail Dec 29, 2016 at 6:58
  • Images can also help to add detail to your question. Dec 29, 2016 at 7:15
  • Please check it now.
    – sruzan
    Dec 29, 2016 at 9:05
  • So when click a more extensive (hover) list is shown? Or it navigates to a page where the list is?
    – Alvaro
    Dec 30, 2016 at 10:50
  • On hover - suggestions; On Click - New page; as shown in the image
    – sruzan
    Jan 5, 2017 at 7:20

2 Answers 2


Considering your comments, and that this question has been discussed in detail here -

1) You could try renaming the Menu item, and call it something more specific. Say, "Other Smartphones?", "All Smartphones" etc. This can then help establish to the user, the content behind the menu.

2) Next, you could leave the click action on the parent node as is, but also supplement the "All" option in something like a sub-menu, giving equal importance to the nav-items. See a quick mockup attached.

enter image description here


Your question seems similar to this other one. Basically, there will be people who think buttons respond on hover and others on click. There is no effective way to indicate that an element will work on hover or on click, so you need to adapt to users behaviours and possible interactions.

Right now, to open the submenu some users might:

  1. Hover the root element
  2. Click the root element

There will be users that might click quickly the root element, before they realise it opened on hover, and be redirected.

To close the submenu some users might:

  • Move out the cursor
  • Click the root element

Those who clicked the root element to close the submenu will be redirected.

I think that it is more intuitive, and creates less conflicts, to show the submenu on a click event, and include an element in the submenu to visit your actual root element.

  • Totally agreed. But, my scenario is such that I need these 2 options (3&4) to work on click and on hover as well. On click doesn't cancel the hover, but it navigates to a parent page with lot of filters/lists. On hover results are sub categories. I can add the parent page as link on hover results, but it is losing its significance. I feel that it is something that needs to be highlighted, which I am not able to do by putting it as a sub category.
    – sruzan
    Dec 29, 2016 at 11:48
  • @sruzan then maybe you can consider giving the click function to a second button/icon next to the parent element. If you could post an actual design it'll be easier to discuss the case :)
    – Alvaro
    Dec 29, 2016 at 11:51
  • Will post the actual design once I reach home. Click function to a second button is a good idea. But, do you think user will get to know that the particular icon is clickable(and leads to some other results on click)? I have not this kind of behaviour on any other site. Also consider the clickable area. Icon is 1/5th of the menu item. This turns out to be of least importance or tertiary. I feel that we are jumping directly from primary to tertiary focus in terms of hierarchy.
    – sruzan
    Dec 29, 2016 at 12:04
  • It was just an idea, but lets see it with the actual design.
    – Alvaro
    Dec 29, 2016 at 12:06
  • I have added the image. Check it now
    – sruzan
    Dec 29, 2016 at 14:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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