html - 如何将垂直滚动条添加到下拉菜单中的特定 ul > li

Question

如何在下拉菜单中定位特定的 ul > li 元素？需要注意的是我不能直接编辑 HTML(导航项)，它是由我使用的工具自动生成的。但是，我可以在某种程度上操纵 CSS。所以，我想知道是否有一种方法可以针对特定的 ul > li 元素添加垂直滚动条。

我需要定位 子菜单 3 的 ul > li，如下面的代码所示。请注意，这些类是由该工具自动生成的。我尝试使用 :nth-child() 伪类，但我认为我做的不对。

<ul class="navigation">
  <li class="children"><a href="#">Main Menu</a>
    <ul class="sub-menu">
      <li class="children"><a href="#">Sub Menu 1</a></li>
      <li class="children"><a href="#">Sub Menu 2</a></li>
      <li class="children" data-mc-id="11"><a href="">**Sub Menu 3**</a>
        <ul class="sub-menu">
          <li class="children"><a href="">Item</a></li>
          <li class="children"><a href="">Item</a></li>
          <li class="children"><a href="">Item</a></li>
          <li class="children"><a href="">Item</a></li>
          <li class="children"><a href="">Item</a></li>
          <li class="children"><a href="">Item</a></li>
          <li class="children"><a href="">Item</a></li>
          <li class="children"><a href="">Item</a></li>
          <li class="children"><a href="">Item</a></li>
          <li class="children"><a href="">Item</a></li>
          <li class="children"><a href="">Item</a></li>
          <li class="children"><a href="">Item</a></li>
          <li class="children"><a href="">Item</a></li>
          <li class="children"><a href="">Item</a></li>
          <li class="children"><a href="">Item</a></li>
          <li class="children"><a href="">Item</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Answer 1

使用 >每次使用 nth-of-type() 进入 DOM 并选择第 n 个菜单选择正确的。

可以通过将高度限制为最大值并添加 overflow-y:auto 来添加滚动条。如果元素的内容更高，则添加滚动条。

选择 <ul> 中的第 n 个元素做同样的事情，但指定第 n 个类型 li相反。

.sub-menu>li>.sub-menu:nth-of-type(1) {
  overflow-y: auto;
  max-height: 10em;
}

.sub-menu>li>.sub-menu:nth-of-type(1)>li:nth-of-type(3) {
  background: red;
}

<ul class="navigation">
  <li class="children"><a href="#">Main Menu</a>
    <ul class="sub-menu">
      <li class="children"><a href="#">Sub Menu 1</a></li>
      <li class="children"><a href="#">Sub Menu 2</a></li>
      <li class="children" data-mc-id="11"><a href="">**Sub Menu 3**</a>
        <ul class="sub-menu">
          <li class="children"><a href="">Item</a></li>
          <li class="children"><a href="">Item</a></li>
          <li class="children"><a href="">Item</a></li>
          <li class="children"><a href="">Item</a></li>
          <li class="children"><a href="">Item</a></li>
          <li class="children"><a href="">Item</a></li>
          <li class="children"><a href="">Item</a></li>
          <li class="children"><a href="">Item</a></li>
          <li class="children"><a href="">Item</a></li>
          <li class="children"><a href="">Item</a></li>
          <li class="children"><a href="">Item</a></li>
          <li class="children"><a href="">Item</a></li>
          <li class="children"><a href="">Item</a></li>
          <li class="children"><a href="">Item</a></li>
          <li class="children"><a href="">Item</a></li>
          <li class="children"><a href="">Item</a></li>
        </ul>
      </li>
    </ul>