導航圖像互相重疊

我必須做一個導航，其元素重疊在一起。詳情請參閱圖片。導航圖像互相重疊

https://dl.dropbox.com/u/7551300/mock.png

我一直在使用UL李與顯示嘗試：錶行和顯示錶細胞，以確保所有元素在div的UL是得到同等寬度這一點很重要，因爲將有幾個這些導航有3或4個元素，我不想每次都對它們的寬度進行硬編碼。

我正在尋找一個解決方案，具有重疊的背景圖像屬性，但我失敗了。

怎麼能解決這個問題？我卡住了...

編輯：這裏是我的關於

<li class="first-menu-item menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-9 current_page_item menu-item-18" id="menu-item-18"> 
     <a href="http://rmbp.home/wordpress/?page_id=9">Psychologie</a> 
</li>

http://jsfiddle.net/yA4zK/

來源

2013-02-20 hnk

你能提供一個[JSFiddle]（http://jsfiddle.net）你的代碼嗎？ – Bigood 2013-02-20 13:01:58

您可以使用z-index的一些定位，實現你在找什麼代碼的jsfiddle 。

<ul> 
    <li class="first">uno</li> 
    <li class="second">dos</li> 
    <li class="third">tres</li> 
    <li class="fourth">quatro</li> 
</ul>

和css：

li{display:inline-block;border:1px solid red; padding: 10px;float:left; position:relative; min-width:100px} 
li.first{background: green; z-index: 100; left: 0} 
li.second{background:yellow; z-index: 99;left: -10px;} 
li.third{background:purple; z-index: 98;left: -20px;} 
li.fourth{background:brown; z-index: 97;left: -30px;}

你的想法。

看看這個例子：http://jsfiddle.net/JKmEQ/

這裏是一個CSS唯一的選擇：如果你關心老IE支持

<ul> 
    <li>uno</li> 
    <li>dos</li> 
    <li>tres</li> 
    <li>quatro</li> 
</ul> 



li{display:inline-block;border:1px solid red; padding: 10px;float:left; position:relative; min-width:100px} 
li:first-child{background: green; z-index: 100; left: 0} 
li:nth-child(2){background:yellow; z-index: 99;left: -10px;} 
li:nth-child(3){background:purple; z-index: 98;left: -20px;} 
li:last-child{background:brown; z-index: 97;left: -30px;}

http://jsfiddle.net/TkyKj/

可能無法正常工作。在這種情況下，您可能需要一些js爲您添加clases。

http://caniuse.com/#search=nth

來源

2013-02-20 13:13:47 David

非常感謝！但我忘了提到我使用Wordpress，而且我只有li = class =「first」和class =「last」。所以我可悲的是不能爲每個李寫特別的CSS。有沒有另一種方法來實現你所做的？ – hnk 2013-02-20 16:35:09

您可以使用僅限css選項（第二個示例）。如果需要較舊的瀏覽器支持，則可以使用少量的jQuery爲您添加類。 – David 2013-04-09 17:53:05

導航圖像互相重疊

回答

相關問題