填充到最后一个子菜单项

Question

我有一个带有子菜单和子子菜单的菜单：

<nav>
<ul><li class="menu-item-has-children"><a href="#"><span>Shop</span></a>
<ul class="sub-menu">
<li class="menu-item-has-children"><a href="#"><span>Item 1</span></a>
<ul class="sub-menu">
    <li><a href="#"><span>Item 1-1</span></a></li>
    <li><a href="#"><span>Item 1-2</span></a></li>
</ul>
</li>
<li class="menu-item-has-children"><a href="#"><span>Item 2</span></a>
<ul class="sub-menu">
    <li><a href="#"><span>Item 2-1</span></a></li>
    <li><a href="#"><span>Item 2-2</span></a></li>
</ul>
</li>
</ul>
</li>
<li class="menu-item-has-children"><a href="#"><span>About</span></a>
<ul class="sub-menu">
<li><a href="#"><span>Item 3</span></a></li>
<li><a href="#"><span>Item 4</span></a></li>
<li><a href="#"><span>Item 5</span></a></li>
<li><a href="#"><span>Item 6</span></a></li>
</ul>
</li>
<li class="menu-item-has-children"><a href="#"><span>Legal</span>
<ul class="sub-menu">
<li><a href="#"><span>Item 7</span></a></li>
<li><a href="#"><span>Item 8</span></a></li>
<li><a href="#"><span>Item 9</span></a></li>
<li><a href="#"><span>Item 10</span></a></li>
</ul>
</li>
<li class="menu-item-has-children"><a href="#"><span>Blog</span></a>
<ul class="sub-menu">
<li><a href="#"><span>Item 11</span></a></li>
<li><a href="#"><span>Item 12</span></a></li>
<li><a href="#"><span>Item 13</span></a></li>
<li><a href="#"><span>Item 14</span></a></li>
</ul>
</li>
</ul></nav>

https://jsfiddle.net/h7qb1wus/

在单击之前，子菜单始终处于隐藏状态。我需要为每个最后一个子菜单添加一个底部填充，以便每个子菜单下方有更多空间，除了最后一个子菜单 - 这个不应该有任何底部填充。所以在第 1-2 项、第 2-2 项、第 6 项和第 10 项下面应该是填充。并且应该总是有相同的填充，所以下面的项目 2-2 应该仍然是 20px 而不是 40px。

我试过了

.sub-menu:not(:last-child){
     padding-bottom: 20px;
     }

但它不起作用。我怎样才能做到这一点？

Answer 1

您可以通过以下 CSS 规则组合来实现。注意：第二条规则中的!important 出于特殊原因是必要的，否则它不会覆盖适用的第一条规则。

我还为受影响的元素添加了红色背景以使其更加明显。

nav > ul > li:not(:last-child) > ul.sub-menu > li:last-child,
nav > ul > li:not(:last-child) > ul.sub-menu > li > ul.sub-menu > li:last-child {
  background: red;
  padding-bottom: 20px;

}
nav > ul li.menu-item-has-children {
  background: none !important;
  padding-bottom: 0 !important;
}

<nav>
<ul><li class="menu-item-has-children"><a href="#"><span>Shop</span></a>
<ul class="sub-menu">
<li class="menu-item-has-children"><a href="#"><span>Item 1</span></a>
<ul class="sub-menu">
    <li><a href="#"><span>Item 1-1</span></a></li>
    <li><a href="#"><span>Item 1-2</span></a></li>
</ul>
</li>
<li class="menu-item-has-children"><a href="#"><span>Item 2</span></a>
<ul class="sub-menu">
    <li><a href="#"><span>Item 2-1</span></a></li>
    <li><a href="#"><span>Item 2-2</span></a></li>
</ul>
</li>
</ul>
</li>
<li class="menu-item-has-children"><a href="#"><span>About</span></a>
<ul class="sub-menu">
<li><a href="#"><span>Item 3</span></a></li>
<li><a href="#"><span>Item 4</span></a></li>
<li><a href="#"><span>Item 5</span></a></li>
<li><a href="#"><span>Item 6</span></a></li>
</ul>
</li>
<li class="menu-item-has-children"><a href="#"><span>Legal</span>
<ul class="sub-menu">
<li><a href="#"><span>Item 7</span></a></li>
<li><a href="#"><span>Item 8</span></a></li>
<li><a href="#"><span>Item 9</span></a></li>
<li><a href="#"><span>Item 10</span></a></li>
</ul>
</li>
<li class="menu-item-has-children"><a href="#"><span>Blog</span></a>
<ul class="sub-menu">
<li><a href="#"><span>Item 11</span></a></li>
<li><a href="#"><span>Item 12</span></a></li>
<li><a href="#"><span>Item 13</span></a></li>
<li><a href="#"><span>Item 14</span></a></li>
</ul>
</li>
</ul></nav>