I am currently building a menu that will be used as a top nav in our portal environment. Unfortunately, due to the nature of business controls, and the lack of flexibility with modifying enterprise code - we are limited to making this work with CSS.
The problem I have is, the menu that /flies out/ from the dropdown menu, appears in front of the parent element. The behavior I want to have, is that when you hover over an item that has a flyout menu - it will slide out like a drawer - from [behind] the parent.
Now this is somewhat similar to a suckerfish menu structure:
<ul>
<li>My Item
<ul>
<li>drop 1</li>
<li>drop 2</li>
</ul>
</li>
<li>My other Item
<ul>
<li>Sub1</li>
<li>Sub2
<ul>
<li>Flyout1</li>
<li>Flyout2</li>
</ul>
</li>
</ul>
</li>
</ul>
When you expand the 'Flyout1/Flyout2' menu, it appears in front of the Sub1/Sub2 menu.
Here is a working example at codepen:
https://codepen.io/barrychapman/pen/YMYoRd
I have tried all the tricks, setting opacities to .99, -1 z-index, etc.
