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 を使用しようとしましたが、機能しません。何か案が？