The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Menu child level appears behind parent level

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #175300

    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?



    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.


    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:

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

    but disabling these two properties

        .main-menu ul li {
            /*position:relative; */
            /* z-index:4;*/

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


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

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.