文章/答案/技术大牛

发布

社区首页 >问答首页 >填充到最后一个子菜单项

问填充到最后一个子菜单项
EN

Stack Overflow用户

提问于 2021-10-17 12:59:03

回答 1查看 46关注 0票数 0

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

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

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

css

css-selectors

回答 1

Stack Overflow用户

发布于 2021-10-17 14:05:08

您可以使用以下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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/69604568

复制

相似问题

问填充到最后一个子菜单项
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问填充到最后一个子菜单项EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问填充到最后一个子菜单项
EN