0

3 番目の子メニューを左にフロートする方法は? メインメニュー「item1」のように3番目の子メニューを左にフロートさせたい

html

   <nav id="nav">
 <ul>
 <li><a href="#">Item1</a>
 <ul>
   <li><a href="#">Menu 1</a></li>
   <li><a href="#">Menu 1</a></li>
   <li><a href="#">Menu 1</a></li>
     <li><a href="#">Menu 1</a>
     <ul class"right-menu">
        <li><a href="#">Menu 2</a></li>
        <li><a href="#">Menu 2</a></li>
        <li><a href="#">Menu 2</a></li>
        <li><a href="#">Menu 2</a></li> 
    </ul>       
    </li> 
  </ul>
 </li>
</ul>
</nav>
4

1 に答える 1

0

:nth-child 構文を使用して、CSS で 3 番目の子をターゲットにすることができます。

CSS

#nav ul li ul li:nth-child(3)

ただし、すべてのブラウザーでサポートされるものが必要な場合は、隣接する兄弟セレクターまたは「+」を使用する傾向があります。

あなたの例では、css は次のようになります。

#nav ul li ul li + li + li {
  float:left;
}

これを行うために必要な膨大な数のセレクターを減らすことができるように、いくつかのクラスを使用することをお勧めします。

于 2013-08-05T18:26:34.033 に答える