css - 图像相互重叠的导航

Question

我必须制作一个导航，其元素相互重叠。详情请看图片。

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

我尝试将 ul li 与 display:table-row 和 display table-cell 一起使用，以确保所有元素在 ul 所在的 div 中获得相等的宽度。这很重要，因为其中会有几个具有 3 个或 4 个元素的导航而且我不想每次都硬编码它们的宽度。

我一直在寻找具有重叠背景图像属性的解决方案，但我失败了。

如何解决这个问题？我被困住了...

编辑：这是我的代码的jsfiddle

<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 和一些定位来实现您正在寻找的内容。

<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 的选项：

<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/

如果您关心旧的 IE 支持，可能无法正常工作。在这种情况下，您可能需要一些 js 来为您添加类。

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