Why does scale move my sub-menu below the other lists?

Question

I have a question about css3 scale, please see my Demo

When the mouse hovers link1, the sub-menu will appear but row-2 will overlay them. But if I comment out -webkit-transform: scale(.9,.9);, row-2 won't overlay sub-menu in link1 from row-1.

I have no idea why scale would do this, does anyone have some experience with the same situation?

Answer 1

You need to add the following:

ul > li {
    float: left;
    -webkit-transform: scale(.9, .9);
    position:relative; /* This is required */
}
ul li:hover {
    z-index:1; /* This is also required */
}

This is because the child ul elements have position:absolute, so you need the position:relative on the parent since the transform on the parent creates a new stacking context. That new stacking context prevents the child ul from displaying over the other li elements

Demo