Последний ребенок <ul>не подчиняется стилю других детей

Question

У меня есть ul с sub ul в качестве моего выпадающего меню навигации.При нажатии раскрывающихся кнопок отображаются подчиненные списки.

По какой-то причине я не могу понять, что последний li подчиненного элемента не соответствует стилям, установленным для всех подчиненных элементов.В этом случае это максимальная высота, а также анимация.

Демонстрация: https://codepen.io/anon/pen/aKNwNj

Редактировать: переполнение: скрыто на .dropdown> .topnav-item это исправляет -спасибо lipp

html

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

sass

.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

jquery

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

Answer 1

Вы должны установить max-height на ul.dropdown, а не на <li>.

Также вам необходимо добавить overflow: hidden к ul.dropdown

ручке =>https://codepen.io/tonysamperi/pen/qKZPxx

Answer 2

Стиль применяется правильно к последнему элементу.Проблема в другом.Даже если вы установили max-height=0px, это не мешает отображению переполненного содержимого.Последний элемент является только последним отображаемым элементом и, следовательно, становится видимым.

Чтобы исправить это, вы можете применить overflow: hidden к .topnav-item ( demo ) или к .dropdown ( демо )