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

Question

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

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 中的第三个孩子。

CSS

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

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

在您的示例中，css 将是：

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

尽管我会推荐使用一些类，这样您就可以减少执行此操作所需的大量选择器。