背景とZ-インデックスを持つli要素の重複

Question

私はulを持っています。ツリーリスト項目は水平に表示されています。 すべてのリスト項目は、同じ背景イメージを持っている：

私はそれが次のようになりますので、背景画像に重なるようにしたい：

はここに私のjsFiddle

ですCSS：

div#menu ul li{ 
    height:30px; 
    display: inline; 
    list-style-type: none; 
    width: 60px; 
    background: url(http://i.stack.imgur.com/adwVj.jpg); 
    background-size: 100%; 
    background-repeat: no-repeat; 
    padding-right: 5px; 
    padding-left:30px; 
    z-index:2;   
} 

div#menu ul li:first-child{ 
    padding-left:20px; 
    z-index:3;    
} 
div#menu ul li:last-child{ 
    padding-left:35px;  
    margin-left:-30px 
    z-index:1;  
} 

HTML：

<div id="menu"> 
     <ul> 
      <li>Account</li> 
      <li>Registreren</li> 
      <li>Winkelwagen</li> 
     </ul> 
</div> 

それがzインデックスと間違って行きます！

Answer 1

少なくともposition: relativeをリスト項目に指定する必要があります。そうでない場合はz-indexは効果がありません。それはいくつかのコードを追加することは常に良い考えですhttp://jsfiddle.net/Faffz/3/