Steps to Reproduce
run the attached wrapped-menubar.zul
1. Open (Click) "Menu First Row 1"
2. Try move your mouse down in order to click Item 1 or 2
Actual Result
This will be quite difficult. In most cases the "Menu Second Row 1" will open before the user has the chance to click a menu item (you need to move the mouse very fast in order to stay in "Menu First Row 1")
Expected Result
(Improved) Usability
Debug Info
There is a visual gap (3px) between the <menu> and the <menupopup>
When moving the mouse over this gap the <menu> in the second row gets activated.
Root Cause
Workaround
the attachment contains a commented out CSS workaround using a an invisible ::after pseudo element to "close the gap" preventing mouse events from reaching the <menu> in the second row.
<style> .z-menu.z-menu-selected::after { background: transparent; /*invisible*/ content: ' '; /*invisible*/ /*border: 1px solid red;*//*enable this line for visual feedback while debugging*/ display: block; position: absolute; top: 100%; /*exactly below the parent*/ left: 0; /*left aligned with the parent*/ width: 100%; /*same width as parent*/ height: 3px; /*cover the gap, tweak if you have a different spacing*/ z-index: 21; /*just more than the menu z-index of 20, might have to be higher when used in a modal dialog*/ } </style>