-1

少し具体的な問題があります。これは私のHTML構造です:

<ul class="dropdown">
    <li class="level-1">Element 1 Level 1</li>
    <li class="level-2">Element 1 Level 2</li>
    <li class="level-2">Element 1 Level 2</li>
    <li class="level-2">Element 1 Level 2</li>
    <li class="level-1">Element 2 Level 1</li>
    <li class="level-1">Element 2 Level 1</li>
    <li class="level-1">Element 2 Level 1</li>
    <li class="level-2">Element 2 Level 2</li>
    <li class="level-2">Element 2 Level 2</li>
    <li class="level-2">Element 2 Level 2</li>
    <li class="level-2">Element 2 Level 2</li>
    <li class="level-2">Element 2 Level 2</li>
    <li class="level-1">Element 3 Level 1</li>
</ul>

ここで、要素 1 レベル 1 ホバーで、その横にクラス レベル 2 の要素を表示する必要があります。ブレークポイントは、レベル 2 クラスの配列の最後です。

期待される結果はli、要素 1 レベル 2 のテキストですべて表示されます

問題:

li.level-1 + li.level-2 { display: block; }

level-2クラスを持つすべての要素ではなく、次の要素のみを表示するということです。

これは、ネストされたレベルのドロップダウンのように機能する必要がありますが、この種の構造を使用します。

問題は、これを CSS または CSS3 だけで解決する必要があることです。

4

2 に答える 2

0

通常、下位レベルのアイテムは、li-item 内の別の ul に配置します。あなたが与える例は、人間だけが実際には深さが低いレベルであることを理解できるため、非常に悪い習慣です

ただし、次のことができる必要があります。

.level-2 {
    display:none;
}

.level-1:hover ~ .level-2 {
    display: block;
}

.level-1:hover ~ .level-1 ~ .level-2 {
    display: none;
}

は、このアイテムの後の x のようなすべてのアイテムを~意味するので、.level-1:hover ~ .level-2

ホバーされた .level-1 アイテムの後のすべての .level-2 アイテム

次のステートメント.level-1:hover ~ .level-1 ~ .level-2は、.level-2別の.level-1アイテムの後にアイテムを非表示にするためにあります。

注: これはあまり役に立ちませんが、アイテムにカーソルを合わせると消えてしまうため、深さの低いアイテムに到達することはできません。

編集:また、これは比較的新しいブラウザでのみ機能します。

適切なツリー マークアップは次のようになります。

<ul>
  <li>
    <a>first level link</a>
    <ul>
      <li>
        <a>second level link</a>
      </li>
    </ul>
  </li>
</ul>

次に、マークアップがより簡単になり、クロスブラウザーで動作します。

ul ul li {display:none;}
li:hover ul {display:block;}
于 2015-04-22T13:20:05.110 に答える