Z-index not working on menu, i'm lost!!!

[joepk]

I’ve managed to create the menu to my likings but unfortunately there is just that one thing ofcourse that doesn’t work… as always… The Z-index doesn’t work. Probably I created it the no-no way but it’s just frustrating to get so close yet so far. See the menu i’m working on here:

clickety

The subitems should slide underneath the darker grey area. Kind of a hidden menu.

I’d love to hear what I did wrong ;)

[Anonymous]

Try this in your CSS:

ol,
ul {
    list-style: none;
}

#nav{
    position: fixed;
    width: 300px;
    height: 100%;
    background-color: #222222;
    text-transform: uppercase;

}

/*          menu         */

ul.menu li:first-child {
    border-top: solid 1px #111;

}

ul.menu li {
    position: relative;
    width: 100%;

}

ul.menu li a {
    height: 60px;
    color: #fff;
    font-size: 14px;
    width: 100%;
    line-height: 60px;
    text-align: right;
    display: block;
    padding-right: 20px;
    border-bottom: solid 1px #111;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    z-index: 999;
}

ul.menu li a:hover {
    color: red;
    background: #333;

}

ul.menu li:hover ul.submenu {
    margin-left: 90%;
}

/*          submenu         */

ul.submenu {
    position: relative;
    width: 70%;
    height: 100%;
    background: #333;
    z-index: -1 !important;
    -webkit-transition: all 500ms cubic-bezier(0.680, 0, 0.265, 1); /* older webkit */
    -webkit-transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
    -moz-transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
    -o-transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
    transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550); /* easeInOutBack */
    margin-top: -61px;

}

ul.submenu li {


}


ul.submenu li a:hover {
    background: #444;


}

[joepk]

Hey there is no difference with that code :(

[Anonymous]

Paste it in and see if your menu works. There is a difference.

To be more specific:

#nav{
    position: fixed;
    width: 300px;
    height: 100%;
    background-color: #222222;
    text-transform: uppercase;

and:

}

ul.submenu li {


}

[joepk]

There must be z-indexes to tackle the layers problem. A friend said I shouldn’t use z-indexes :o

[Anonymous]

You need the z-index: -1 in the ul.submenu for it to work. The two I removed were the problem.

The z-index: 999; in ul.menu li a can go too, I think.

[joepk]

I did exactly what you said and nothing is changing. The best is to fiddle arround with my codepen and try to fix it with css only ;)

[Anonymous]

Only the CSS was changed and only where I indicated. I altered your codepen as shown and the menu is working as you wanted. You are still missing something. Don’t change anything but the CSS and only where I indicated.

[joepk]

Can you show me the link to your version? It’s that simple for me..

[Anonymous]

It’s working for me here.

[joepk]

LOL its not working on chrome…. At least not my chrome

And on my mobile phone it also doesn’t work.

Maybe its a chrome thing :p

[Anonymous]

I don’t use Chrome, so can’t help you there. It does work on Firefox and IE8, and NOTHING works for me on IE8 so that’s a good sign! LOL

Someone else will have to jump in here to answer your Chrome issue.

[joepk]

Ok lets say FF and IE have the z-index rules correct. Because with just one z-index you define that element to be under all the others… Love it, so simple!

So all the other browsers should have the same rules! To bad this one rule hasn’t applied to all the browsers. I guess I’ll have to make a case of this.

[Anonymous]

Is the submenu not going beneath? Explain the “not working” part.

Try decreasing the z-index -999 to -9999 in the ul.submenu (Guessing here.)

[joepk]

Hey I’ve contacted Google about the difference of the z-index rule. They should change it like IE en FF. This prevents more of cases like mine in the future. Hope my attempt of globalizing stuff works out :p

[Author]

Posts