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

如果这是您的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>

Answer 2

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

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

如何将垂直滚动条添加到特定的ul＆gt; li在下拉菜单中

2 个答案: