Marking issue as won't fix after several attempts to fix this issue in IE7.
The main problem is that IE7 doesn't fully comply with CSS standards. It creates a new "stacking context" for every element that has 'position:relative'. This way, z-index values are only relative to the current stacking context; they don't apply to other stacking contexts (i.e. elements with 'postion:relative') that appear later in the HTML markup. So, for example, if we specify a z-index of 10000 on element A, which covers a big part of the viewport, but whose markup appears earlier in the HTML document, and we have another element B that appears later in the HTML document and has 'position:relative' and shares part of the area that element A, then element B will always appear on top of element A.
Some of the approaches to get around this situation invlove modifying all other elements on the page that have 'position:relative', but that would require specific knowledge of the page and it wouldn't be acceptable since that could create plenty of side effects.
The approach that was tried consists in dynamically creating a transparent iframe that is placed below the menu and above everything else, a similar approach used in ace:autoCompleteEntry. However, in the case of the menu components, because of all the complex styling ancestry of these components and for other unknown reasons, this approach didn't work, despite trying several different variations and workarounds. In some cases the approach seemed to work but iframe prevented the user from interacting with the displayed submenu. In other cases, the iframe also appeared below the 'position:relative' element, and in some other cases it caused some odd behaviours in the component.
The only possible workaround is to rearrange the page to avoid having these 'position:relative' elements near the menu.
Reminder to document as known issue for IE7.