Überlappende Li-Elemente mit Hintergrund und Z-Index

Question

Ich habe eine ul mit Baum Liste Elemente in einer horizontalen Ansicht. Alle Listenelemente haben die gleiche Hintergrundbild:

Ich möchte die Hintergrundbilder zu überlappen, so dass es wie folgt aussieht:

Hier ist mein 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> 

Es geht mit dem z-index falsch!

Answer 1

sollten Sie zunächst mindestens position: relative zu Ihren Listenartikeln geben, sonst hat z-index keine Wirkung. dann benutzen Sie einfach

div#menu ul li + li { 
    left : -20px; 
} 

so werden die Etiketten dicht beieinander bleiben (wird aus dem zweiten <li> Element diese Regel angewendet werden, beginnend)

Beispiel Geige: http://jsfiddle.net/Faffz/3/