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

以下是html：

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

演示：

正如您所看到的，我有一个带有透视变换的div，我想在上面显示一个简单的列表，但是列表的一半在div后面

看起来是这样的：

---

我尝试使用z索引，但它不起作用。知道吗？

在哪个浏览器中？因为JSFIDLE在我的Chrome中看起来与你的图像大不相同。截图来自Safari，我可以看到Chrome看起来不同，但问题是相同的，你只能点击前3个点，其余的点是“隐藏的”

.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
}