2

親ulの最初のレベルのulサブメニューのcssをターゲットにする必要があります。

CSS：

#menu li:hover > ul.sub_menu { ...some styles }

..しかし、これはもちろんすべてのsub_menuに対して実行されます。親リスト項目にカーソルを合わせたときに、親に関連する最初のsub_menuに対してのみこの特定のスタイルが必要です。

HTML：

<ul id="menu">
    <li>Item 
      <ul class="sub_menu"><!-- target only this one -->
       <li>Item
         <ul class="sub_menu">etc...</ul><!-- do not do for this one and so on-->
       </li>
      </ul>
    </li>
    <li>Item 
      <ul class="sub_menu"><!-- target only this one -->
       <li>Item
         <ul class="sub_menu">etc...</ul><!-- do not do for this one and so on-->
       </li>
      </ul>
    </li>
</ul>

フィードバックをありがとう...

4

1 に答える 1

2

:first-childセレクターを使用できます。

#menu > li:first-child > ul.sub_menu {
    color: red;
}

次に、子孫セレクターを使用して、他の要素の変更を元に戻します。

#menu > li:first-child > ul.sub_menu ul {
    color: black;
}

デモ： http： //jsfiddle.net/6y4Sb/

于 2012-11-10T21:24:16.153 に答える