0

要素が互いに重なり合うナビゲーションを作成する必要があります。詳細は画像をご覧ください。

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

display:table-row および display table-cell で ul li を使用して、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/

4

1 に答える 1

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;}

http://jsfiddle.net/TkyKj/

古いIEサポートを気にする場合は機能しない可能性があります。その場合、クラスを追加するために少しのjsが必要になる場合があります。

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

于 2013-02-20T13:13:47.083 に答える