Jquery 最后一个孩子<；ul>；不服从其他孩子的风格

我有一个ul和一个子ul作为我的下拉导航菜单。 单击下拉按钮时会显示子ul lis

由于某些原因，我无法理解，sub ul的最后一个li不符合为所有sub ul li设置的样式。在这种情况下，这是最大高度，也是动画

演示：

编辑：溢出：隐藏在。下拉>.topnav项目修复它-谢谢lipp

html jquery

---

样式将正确应用于最后一项。问题是另一个。即使您设置了

max height=0px

，这也不会阻止溢出的内容可见。最后一项只是最后一个渲染元素，因此可见

---

要解决此问题，您可以将

溢出：隐藏

应用于

.topnav项

（）或

.dropdown

（）

您必须在

ul.dropdown

上设置

最大高度

，而不是

您还需要在

ul.下拉列表中添加
overflow:hidden

pen=>
这是flex Fault，只是去注释掉了flex部分，并用一个float替换了它：只保留顶级列表项，但这并不能解决下拉列表中最后一个孩子的问题。你更新了笔吗？是的，哇，非常感谢，这解决了它。这对我来说似乎很奇怪，因为它只是最后一个这样做的项目。它是最后一个具有相对位置的渲染项目，所以最后一个才位于顶部。感谢溢出：隐藏属性修复了它。尽管它只需要像lipp所说的那样添加到
。此外，我还打算为每个
设置最大高度以分别设置动画。好吧，这似乎是浪费计算，但是…如您所愿！
<nav id="topnav">
<ul class="topnav-box">
  <li class="topnav-item"><a class="link" href="">Home</a></li>
  <li class="topnav-item"><button class="button">Dropdown 1</button>
    <ul class="dropdown">
      <li class="topnav-item"><a class="link" href="">Test</a></li>
      <li class="topnav-item"><a class="link" href="">Not animating, Y?</a></li>
    </ul>
  </li>
  <li class="topnav-item"><button class="button">DD 2</button>
    <ul class="dropdown">
      <li class="topnav-item"><a class="link" href="">Test</a></li>
      <li class="topnav-item"><a class="link" href="">Not animating, Y?</a></li>
    </ul>
  </li>
  <li class="topnav-item"><button class="button">Big Dropdown</button>
    <ul class="dropdown">
      <li class="topnav-item"><a class="link" href="">Test</a></li>
      <li class="topnav-item"><a class="link" href="">Test</a></li>
      <li class="topnav-item"><a class="link" href="">Test</a></li>
      <li class="topnav-item"><a class="link" href="">Not animating, Y?</a></li>
    </ul>
  </li>
  <li class="topnav-item"><a class="link" href="">About</a></li>
</ul>
</nav>

.topnav-box
  display: flex
  align-items: center

.topnav-item
  position: relative

  > .link
    white-space: nowrap
    display: block
    text-decoration: none
    padding: 6px 10px 6px 10px
    color: white
    background-color: orange
    font-size: 22px
    line-height: 100%
    &:hover
      background-color: white
      color: orange

  > .button
    border: none
    cursor: pointer
    margin: 0
    padding: 6px 10px 6px 10px
    color: white
    background-color: orange
    font-size: 22px
    line-height: 100%
    &:hover
      color: orange
      background-color: white

  //Show dropdown items when button has -js-active class
  > .button.-js-active
    + .dropdown
      > .topnav-item
          display: block

  > .dropdown
    position: absolute
    top: 100%
    min-width: 100%

    //Apparently this does not affect the last-child of .dropdown ul
    > .topnav-item
      display: none
      max-height: 0px
      @for $i from 1 through 12
        &:nth-of-type(#{$i})
          animation:
            name: subnav
            duration: 3000ms
            delay: (200ms * $i) - 200ms
            fill-mode: forwards

@keyframes subnav
  0%
    max-height: 0px
  100%
    max-height: 35px

function tglNavDropDown (e) {
  e.stopPropagation();
  $('.topnav-item > button').not(this).removeClass('-js-active');
  $(this).toggleClass('-js-active');
}
$('.topnav-item > .button').click(tglNavDropDown);