For an example of this menu, check this quick code snippet I made on jsFiddle:
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.
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?