與背景和z索引重疊李元素

我有一個ul與水平視圖中的樹列表項。的列表項具有相同的背景圖片：與背景和z索引重疊李元素

Background image is the same for all li

我想重疊的背景圖像，所以它看起來是這樣的：

This is what I try to accomplish

這裏是我的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-index的！

來源

2012-10-01 This_is_me

它總是一個好主意，添加一些代碼在問題中也是如此。不只是在小提琴中。 – jurgemaister

感謝您的提示，我添加了CSS和HTML到我的問題 –

有些時候，我們無法打開小提琴。更好地保持代碼有問題並提供小提琴鏈接 –

您應該至少給出position: relative到您的清單項目，否則z-index不起作用。然後只使用

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

這樣的標籤將保持併攏（此規則將從第二<li>元素開始被應用）

例小提琴：http://jsfiddle.net/Faffz/3/

來源

2012-10-01 09:41:29 fcalderan

ahaaa nice 1 mate .. –

謝謝這個作品！我需要等3分鐘纔可以接受這個揚聲器 –

很高興有幫助:) – fcalderan

與背景和z索引重疊李元素

回答

相關問題