为什么比例尺会把我的子菜单移到其他列表下面？

Question

我有一个关于css3 scale的问题，请看我的演示

当鼠标悬停link1时，会出现子菜单，但row-2会覆盖它们.但是如果我评论一下-webkit-transform: scale(.9,.9);，row-2不会从row-1中覆盖link1中的子菜单。

我不知道为什么scale会这么做，有没有人对同样的情况有一些经验？

Answer 1

您需要添加以下内容：

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

这是因为子ul元素有position:absolute，所以您需要父元素上的position:relative，因为父元素上的transform创建了一个新的堆叠上下文。新的堆叠上下文阻止子ul在其他li元素上显示。

演示