带CSS最大高度过渡的底边框

Question

我想在两个边框之间包含多个菜单。不幸的是'bottom-border'不起作用，因为在过渡发生时边框会消失，所以我在内容中使用:: after：''。对于第一个菜单，它工作正常，但是当第二个菜单（流派）出现时，底部边框丢失了。

function menu() {
  var x = document.getElementById('mobile-nav');
  if (x.className === 'nav-disabled') {
    x.className = 'nav-active';
  } else {
    x.className = 'nav-disabled';
  }
}

function genres() {
  var y = document.getElementById('genres-container');
  var x = document.getElementById('mobile-nav');
  if (y.className === 'nav-disabled') {
    y.className = 'nav-active';
    x.className = 'nav-disabled';
  }
}

header {
  position: sticky;
  position: -webkit-sticky;
}

.nav-disabled {
  max-height: 0;
  overflow: hidden;
}

.nav-active {
  max-height: 150px;
  overflow: hidden;
}

#mobile-nav {
  transition: max-height ease .3s;
}

#mobile-nav ul {
  padding: 18px 0 18px 0;
}

#mobile-nav li {
  padding-bottom: 10px;
}

#genres-container {
  transition: max-height ease .3s .3s;
}

#genres-container ul {
  padding: 18px 0 18px 0;
}

#genres-container li {
  padding-bottom: 10px;
}

.navwrap li {
  display: inline-block;
  cursor: pointer;
}

.navwrap {
  background: white;
  border-bottom: 1px solid black;
  display: grid;
  grid-template-columns: auto auto;
  padding: 18px 0 18px 0;
  overflow: hidden;
}

.navwrap::after {
  content: '';
  border-bottom: 1px solid black;
  position: absolute;
  left: 0;
  right: 0;
  top: auto;
  bottom: 0;
}

.navwrap ul {
  margin: auto 0 auto 0;
  padding: 0;
  text-align: right;
}

<header>
  <nav class="navwrap">
    <h1 class="logotype">
      <a href="auvieuxbouc.html">Header</a>
    </h1>
    <ul>
      <li>
        <a class="nav-link" onclick="menu()">menu</a>
      </li>
    </ul>
  </nav>
  <div id="mobile-nav" class="nav-disabled">
    <ul>
      <li>
        <a class="nav-link" onclick="genres()">genres</a>
      </li>
      <li>
        <a>recherche</a>
      </li>
      <li>
        <a>panier</a>
      </li>
    </ul>

  </div>
  <div id="genres-container" class="nav-disabled">
    <ul>
      <li>
        <strong>genres</strong>
      </li>
      <li></li>
      <li>
        arts
      </li>
      <li>
        littérature
      </li>
      <li>
        policier
      </li>
    </ul>
  </div>
</header>