What is the proper way to make 2 lines of hover dropdown menus not interfere with each other?

Question

For an example of this menu, check this quick code snippet I made on jsFiddle:

https://jsfiddle.net/27w3y6dh/

Our own menu is somewhat more complex, but suffers from the same issue. Additional complexity brings that the submenu doesn't depend on what's selected in the top menu for the most part. All dropdowns on the top menu are for 1 group that doesn't show a submenu (essentially quick actions), and then the top menu has 2 buttons that bring you to different pages (for administrative purposes), where each page has a separate submenu that doesn't change as long as you're in a page that is linked to by that submenu.

mockup below. The blue is an indication of the currently selected page, so the first menu only appears when icon 2 is selected. Everything to the left of the icons doesn't have a menu. The items on the right don't have a menu either. In the example, dropdown 2 is expanded and covers up dropdown 2 in the submenu.

^{download bmml source – Wireframes created with Balsamiq Mockups}

As you can see, if you move your mouse over one of the top dropdown menus (marked as "mouse over me"), the menu directly below is hidden behind the revealed element. This means that if you accidentally overshoot the bottom menu, you end up having to move your mouse away from the top menu so it disappears. this isn't really a user-friendly, and should be fixed.

We have considered making the top menu clickable and the bottom menu hoverable, but that means they have inconsistent behaviour, and we don't want to make both menus clickable because that means the user needs an extra click to make it work. A delay would make the menu less responsive.

Is there an option that would retain responsiveness, minimizes the number of clicks and still allows both menus to have the same behaviour?

Answer 1

You can add padding to the menu to have it more inline. This is not ideal since you have a smaller hit area compared to the whole menu item. See image below.

This way there's always a part of the underlying menu item visible.

Another suggestion could be this

However, I'd consider changing the 2x2 menu structure. It complicates your navigation greatly as you say yourself.

Try having either a horizontal menu with the submenu below or a vertical menu with the submenu to the side. See image below.

Edit

Added another example of the above mentioned idea but now also considering Alvaro's comment about the right menu items.

The menu width depends on the length of the labels, but I think the menu items to the right will still be visible.

Answer 2

If you have the sub-menu connected to its header, the header next to the other headers both vertically and horizontally, I think at least one of the premises needs to be changed:

• all headers are in the same line and the sub-menu displays below each of them
• the headers are one over the other and the sub-menu displays on the side of its header
• the header is not connected to its sub-menu: for example, the sub-menus always appear in the same place and have a little delay so the mouse can go from the header to the sub-menu before it fades out.
• sub-menu opens on click: this doesn't solve the problem but if you need to stay with your layout you might want to consider. You need to balance if it is easier/more intuitive to click a second time to close this sub-menu or to move the mouse away and come back.

The first two options are the way I would go. You can always change from one to the other: in large screens have the menu horizontally but when the screen is not wide enough display it vertically. Or leave the elements that don't have a sub-menu under a More button which shows them vertically.

Answer 3

I don't really think you can circumvent the issue other than by increasing the hit area with proper padding.

I always try to avoid having two layers of horizontal navbars, because of the issue with overshooting your target. I'm pro 2 layers vertical navigation or a combination with horizontal main nav and vertical sub nav. But I know this is not always possible in every situation and you probably have to work with the card that you are dealt.

I have an other suggestion though. Just one layer of horizontal navigation where the submenu replace the main menu and adds the possibility of returning to the main nav.
Cons:
1. Less discoverability of main navigation links when in submenu
2. Extra clicks for navigation
Pro:
1. This pattern is well suited for smaller viewports (responsive)

^{download bmml source – Wireframes created with Balsamiq Mockups}