Z-index dropdown menu issue

Question

Well hello there..

Can anyone tell me what to do when z-index is not working???

All elements are in absolute and relative position but it doesn't respond to any value.

<div id="main-menu" class="menu-main-container">
<ul id="menu-main" class="menu">
    <li id="nav-menu-item-11" class=" menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home"><a href="http://localhost/" class="menu-link main-menu-link">Home</a>

    </li>
    <li id="nav-menu-item-10" class=" menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children"><a href="http://localhost/?page_id=7" class="menu-link main-menu-link">Shortcodes</a>

        <ul class="menu-depth-1">
            <li id="nav-menu-item-374" class=" menu-item menu-item-type-post_type menu-item-object-page"><a href="http://localhost/?page_id=7" class="menu-link sub-menu-link">Shortcodes</a>

            </li>
        </ul>
    </li>
    <li id="nav-menu-item-125" class=" menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-35 current_page_item menu-item-has-children"><a href="http://localhost/" class="menu-link main-menu-link">#35 (no title)</a>

        <ul class="menu-depth-1">
            <li id="nav-menu-item-376" class=" menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children"><a href="http://localhost/?page_id=7" class="menu-link sub-menu-link">Shortcodes</a>

                <ul class="menu-depth-2">
                    <li id="nav-menu-item-377" class=" menu-item menu-item-type-post_type menu-item-object-page"><a href="http://localhost/?page_id=7" class="menu-link sub-menu-link">Shortcodes</a>

                    </li>
                </ul>
            </li>
        </ul>
    </li>
    <li id="nav-menu-item-333" class=" menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor menu-item-has-children"><a href="http://localhost" class="menu-link main-menu-link">Blog</a>

        <ul class="menu-depth-1">
            <li id="nav-menu-item-130" class=" menu-item menu-item-type-post_type menu-item-object-page current-menu-ancestor current_page_ancestor menu-item-has-children"><a href="http://localhost/?page_id=116" class="menu-link sub-menu-link">blog 1</a>

                <ul class="menu-depth-2">
                    <li id="nav-menu-item-375" class=" menu-item menu-item-type-post_type menu-item-object-page current-menu-ancestor current-menu-parent current_page_parent current_page_ancestor menu-item-has-children"><a href="http://localhost/?page_id=2" class="menu-link sub-menu-link">Sample Page</a>

                        <ul class="menu-depth-3">
                            <li id="nav-menu-item-378" class=" menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-35 current_page_item"><a href="http://localhost/" class="menu-link sub-menu-link">#35 (no title)</a>

                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

        .parent-main-menu {
        background-color: #0c8fff;
        min-width: 200px;
        float: left;
    }

    #main-menu ul {
        list-style-type: none;
    }

    #main-menu ul li a {
        padding: 10px 15px;
        display: block;
        color: #fff;
        text-decoration: none;
    }

    #main-menu ul li a:hover {
        background-color: #007ee9;
    }

    #main-menu ul li:hover > ul {
        left: 100%;
        -webkit-transition: left 300ms ease-in;
        -moz-transition: left 300ms ease-in;
        -ms-transition: left 300ms ease-in;
        transition: left 300ms ease-in;
    }

    #main-menu ul li > ul {
        position: absolute;
        background-color: #333;
        top: 0;
        left: -200px;
        min-width: 200px;
        height: 100%;
        -webkit-transition: left 300ms ease-in;
        -moz-transition: left 300ms ease-in;
        -ms-transition: left 300ms ease-in;
        transition: left 300ms ease-in;
    }

    #main-menu ul li > ul li a:hover {
        background-color: #007ee9;
    }

    .menu {
        z-index: 400;
        position: relative;
    }

    .menu-depth-1 {
        z-index: 300;
        position: absolute;
    }

    .menu-depth-2 {
        z-index: 200;
        position: absolute;
    }

    .menu-depth-3 {
        z-index: 100;
        position: absolute;
    }

Here is a fiddle of my menu!

http://jsfiddle.net/kcgCX/180/

Thank you in advance.

Answer 1

Z indexes are tricky, and from what I understand, only work well at the document root level or for positioning one or two specific things - not menus and multiple nested items.

Instead of using Z-indexes, I simply used white-space:nowrap and modified positioning using child selectors. Seems to work well:

#main-menu {
width:15em;
background: #777;
position: relative;
height: auto;
    ul {
    background: #111 !important;
        li ul {
        background: #222 !important;
            li ul {
            background: #333 !important;
                li ul {
                background: #444 !important;
                }
            }
        }
    }
}
.parent-main-menu {
background-color: #0c8fff;
min-width: 200px;
float: left;
}
#main-menu ul {
list-style-type: none;
}
#main-menu ul li a {
padding: 10px 15px;
display: block;
color: #fff;
text-decoration: none;
}
#main-menu ul li a:hover {
background-color: #007ee9;
}
#main-menu > ul > li:hover > ul {
width: 200px;
-webkit-transition: width 300ms ease-in;
-moz-transition: width 300ms ease-in;
-ms-transition: width 300ms ease-in;
transition: width 300ms ease-in;
overflow:visible;
}
#main-menu > ul > li > ul, #main-menu > ul > li > ul > li > ul {
overflow: hidden;
left: 100%;
position: absolute;
background-color: #333;
top: 0;
width: 0;
white-space: nowrap;
height: 100%;
-webkit-transition: width 300ms ease-out;
-moz-transition: width 300ms ease-out;
-ms-transition: width 300ms ease-out;
transition: width 300ms ease-out;
}
#main-menu > ul > li > ul > li:hover > ul {
width: 200px;
overflow:visible;
-webkit-transition: width 300ms ease-in;
-moz-transition: width 300ms ease-in;
-ms-transition: width 300ms ease-in;
transition: width 300ms ease-in;    
}
#main-menu ul li > ul li a:hover {
background-color: #007ee9;
}

Fiddle

EDIT: Of course, this CSS can definitely be cleaned up a good bit, there is some redundant code. The point is to exhibit how using positioning, width, and not letting elements overflow or wrap can lead to less complicated layouts than using z-indexes and multiple level classes.