导航图像互相重叠

Question

我必须做一个导航，其元素重叠在一起。详情请参阅图片。

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/

Answer 1

您可以使用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