How can I position child ul below parent ul with z-index

I am trying to position my child ul under the parent ul so I have

http://jsfiddle.net/hjJYN/

Code snipplet

ul {
    p开发者_StackOverflowosition: relative;
    z-index: 5;
}
li ul {
    position: absolute;
    z-index: 2;
}

but I still have my child ul above the parent, why is that. With plain old divs, I can use z-index ok why not with uls? http://jsfiddle.net/MjHBT/

Try this

ul {
    position: relative;
}
li ul {
    position: absolute;
    z-index: -2;
}

In other words, remove the z-index for the parent and give the child a negative z-index. This causes the hover of the sub menu to fail though and something about negative z-indices feels wrong.

You could just the give the nested ul a margin-top:0, position it lower, and give it square corners. It would look fine then

add to the child ul position:absolute;

ul {
    position: relative;
    z-index: 5;
}
li ul {
    z-index: 1;
    position:absolute;
}