css - 透视 webkit 变换和绝对位置问题

Question

这是html：

<div class="row">
    <div></div>
    <ul></ul>
</div>

这是我的CSS：

.row {
    width: 173px;
    height: 38px;
    position: absolute;
}

.row div {
    width: 200px;
    height: 32px;
    background: #51565b;
    -webkit-transform: perspective( 173px ) rotateY( -20deg ) translate(-33px, 2px);
    position: absolute;
    z-index: 9;
}

ul {
    background: red;
    position: absolute;
    width: 300px;
    height: 16px;
    left: 26px;
    top: 11px;
    z-index:10
}

演示：http: //jsfiddle.net/w3Wa4/

如您所见，我有一个带有透视变换的 div，我想在其上方显示一个简单的列表，但列表的一半在 div 后面。

所以它看起来像这样：

我尝试使用 z-index 但它不起作用。任何想法？