我必须使其元素相互重叠进行导航。有关详细信息,请参见图片。
https://dl.dropbox.com/u/7551300/mock.png
我尝试过使用带有display:table-row和display table-cell的ul li来确保所有元素在ul所在的div中得到相等的宽度。这很重要,因为这些导航中有几个导航或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>
答案 0 :(得分:0)
您可以使用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;}
如果您关心旧的IE支持,可能无法正常工作。在这种情况下,您可能需要一些js来为您添加clases。