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

Question

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

http://jsfiddle.net/hjJYN/

Snipplet code

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

but I still have a ul child above the parent, why is this so. With regular old divs, I can use z-index ok, why not use uls? http://jsfiddle.net/MjHBT/

Answer 1

try it

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

In other words, delete z-indexfor the parent and give the child a negative z-index. This causes the submenu to fail to overlap, although something about negative z-indexes seems wrong.

Answer 2

ul margin-top: 0, . ,

Answer 3

add ul: absolute to the child position;

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