如何消除移动端垂直动画dropdown menu间的间隙并保留动画？

已完成网页版下拉菜单的平滑动画效果，但在移动端布局中，使用nav-link dropdown-toggle类的下拉菜单（Browse、Submit）在导航栏展开时，标题之间存在较大间隙。需要在保留现有动画的前提下消除该间隙，使下拉菜单隐藏时，这些下拉标题能和Profile、Forums保持垂直对齐。

相关CSS代码 #

/* Makes the dropdown menu fall downwards*/
.navbar-nav .dropdown-menu {
  display: block;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, transform 0.3s ease;
  transform: translateY(-10px);
}

.navbar-nav .nav-item.dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.navbar-nav .dropdown-menu {
  transition-delay: 0.1s;
}

.navbar-nav .dropdown-menu:hover {
  opacity: 1;
  visibility: visible;
}

/*makes the dropdown menu have movement inside the boxes*/
.dropdown-item {
  width: 30px;
  height: 30px;
  transition: height 0.3s;
  position: sticky;
  transition-timing-function: linear;
}

.dropdown-item:hover {
  height: 35px;
}

.dropdown-item:hover {
  opacity: 1;
  visibility: visible;
}

/*adds a small bounce to hoverable items*/
.side-nav a {
  transition: transform 0.3s ease, transform 0.3s ease;
  transition-timing-function: linear;
}

.side-nav a:hover {
  transform: translateY(-1px);

}

.card.d-block.p-3.my-md-3 a {
  transition: transform 0.3s ease, transform 0.3s ease;
  transition-timing-function: linear;
}

.card.d-block.p-3.my-md-3 a:hover {
  transform: translateY(-1px);
}

a.mb-2 {
  transition: transform 0.3s ease, transform 0.3s ease;
  transition-timing-function: linear;
}

a.mb-2:hover {
  transform: translateY(-1px);
}

相关HTML代码 #

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<!-- Container -->
<div id="container" class="page-container page-container-user">
  <a id="top"></a>
  <!-- Top Bar -->
  <nav class="navbar navbar-toggleable-sm navbar-inverse header" data-topbar role="navigation" id="header">

    <!-- Mobile header toggle -->
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#headerContent"
        aria-controls="headerContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <!-- End mobile header toggle -->

    <!-- Site name -->
    <a class="navbar-brand" href="https://toyhou.se">TOYHOU.SE</a>
    <!-- End site name -->

    <!-- Buttons -->
    <div class="collapse navbar-collapse" id="headerContent">

      <!-- Left Nav Section -->
      <ul class="navbar-nav mr-auto navbar-left">
        <li class="nav-item">
          <a class="nav-link" href="https://toyhou.se/DeclineOfMySanity">
                        <span class="fa fa-home"></span> Profile 
                    </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="https://toyhou.se/~forums">
                        <span class="fa fa-comments"></span> Forums 
                    </a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" data-target="#dropdownBrowse" > <span class="fa fa-fw fa-search"></span> Browse </a>
          <div class="dropdown-menu" id="dropdownBrowse">
            <h6 class="dropdown-header">Characters</h6>
            <a class="dropdown-item" href="https://toyhou.se/~browse/popular"><i class="fa fa-fire fa-fw mr-1"></i> Popular </a>
            <a class="dropdown-item" href="https://toyhou.se/~browse/feed"><i class="fa fa-binoculars fa-fw mr-1"></i> Feed </a>
            <a class="dropdown-item" href="https://toyhou.se/~browse/recent"><i class="fa fa-fw fa-clock mr-1"></i> Recent </a>
            <a class="dropdown-item" href="https://toyhou.se/~browse/search"><i class="fa fa-fw fa-search mr-1"></i> Search </a>
            <h6 class="dropdown-header">Browse</h6>
            <a class="dropdown-item" href="https://toyhou.se/~library/popular"><i class="fa fa-fw fa-book mr-1"></i> Literatures </a>
            <a class="dropdown-item" href="https://toyhou.se/~worlds"><i class="fa fa-fw fa-globe mr-1"></i> Worlds </a>
          </div>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" data-target="#dropdownCreate" > <span class="fa fa-fw fa-plus"></span> Submit </a>
          <div class="dropdown-menu" id="dropdownCreate">
            <a class="dropdown-item" href="https://toyhou.se/~characters/create"><i class="fa fa-fw fa-user mr-1"></i> Character </a>
            <a class="dropdown-item" href="https://toyhou.se/~bulletins/create"><i class="fa fa-fw fa-newspaper mr-1"></i> Bulletin </a>
            <a class="dropdown-item" href="https://toyhou.se/~images/upload"><i class="fa fa-fw fa-image mr-1"></i> Image </a>
            <a class="dropdown-item" href="https://toyhou.se/~images/multi-upload"><i class="fa fa-fw fa-image mr-1"></i> Multi-Images </a>
            <a class="dropdown-item" href="https://toyhou.se/~literatures/create"><i class="fa fa-fw fa-book mr-1"></i> Literature </a>
            <a class="dropdown-item" href="https://toyhou.se/~worlds/create"><i class="fa fa-fw fa-globe mr-1"></i> World </a>
          </div>
        </li>
      </ul>
      <!-- End Left Nav Section -->

问题截图 #

内容的提问来源于stack exchange，提问作者Sarah Z