css - 我想将第三个子菜单向左浮动

Question

如何让第三个子菜单向左浮动？ 我想像主菜单“item1”一样将第 3 个子菜单 float 到左侧

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>

Answer 1

您可以使用 :nth-child 语法在 CSS 中定位第三个 child 。

CSS

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

但是，如果您想要所有浏览器都支持的东西，我倾向于使用相邻的兄弟选择器或“+”。

在您的示例中，CSS 将是:

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

虽然我会推荐使用一些类，以便您可以减少执行此操作所需的大量选择器。