[Solved] Menu child level appears behind parent level

[Historical Forums User]

Hi all,
I have a Pure CSS3 Navigation Menu where child level appears behind parent level. Tried to resolve it by playing with z-index and other elements for 5 days now!
I just cannot see the problem. Being a noob doesn’t help either…
A save anyone?

CodePen:
http://codepen.io/anon/pen/xpbqH

[Paulie_D]

The Codepen is a little ‘busy’ with stuff not required to demonstrate the problem however, I’m not seeing a problem in Chrome 35 / W8 / 64bit.

[Historical Forums User]

I did the best I could to strip down the content. The focus is the menu. The CSS contains remarks identifying the components. The problem is in the 3rd level child menu.
Try to hover above the second menu item from the left and go through its members.
You will identify the issue right away. The 3rd level sub menu is “stuck” behind the (2nd level) parent you are hovering above.
I’m pretty desperate here…
Forked a visually cleaner version:

http://codepen.io/anon/pen/numjd

[Paulie_D]

I’m not used to reading in that direction :)

but disabling these two properties

    .main-menu ul li {
        /*position:relative; */
        display:inline;
        float:right;
        /* z-index:4;*/
    }

seems to help…after that I think it’s just positioning.

[Historical Forums User]

We have a winner!
Thanks very much. It’s greatly appreciated.

[Author]

Posts