如何在下拉菜单中将垂直滚动条添加到特定的 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

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

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

要选择<ul> 中的第n 个元素，只需执行相同操作，但指定li 的第n 个类型。

.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>

Answer 2

如果这是您的 HTML 输出，您可以定位此元素 <li class="children" data-mc-id="11"> 并从那里开始。

例子：

li[data-mc-id] ul.sub-menu {
    overflow-y: auto;
    max-height: 200px;
}

li[data-mc-id] ul.sub-menu li{
    background-color: red
}
    
li[data-mc-id] ul.sub-menu li:nth-child(3){
    background-color: green
}

<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>