Bootstrap 5 Multilevel dropdown submenu blocked by horizontal scroll

Question

I'm trying to create multilevel dropdown using bootstrap 5, and it's working well but there is the problem when the dropdown have many li tag and make the dropdown appear exceed it's container. so i try to use vertical scroll using css class but it make the multilevel dropdown or submenu item not showing and need to using horizontal scroll to show it

css code

.dropdown-menu li {
  position: relative;
}
.dropdown-menu .dropdown-submenu {
  display: none;
  position: absolute;
  left: 100%;
  top: -8px;
}
.dropdown-menu .dropdown-submenu-left {
  right: 100%;
  left: auto;
}
.dropdown-menu > li:hover > .dropdown-submenu {
  display: block;
}
.dropdown-menu-scrollable {
  height: auto;
  max-height: 300px;
  overflow: auto;
}

html code

<nav class="navbar navbar-expand-lg navbar-dark bg-dark" style="font-size: 13px;">
  <div class="container-fluid">
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Collection
          </a>
          <ul class="dropdown-menu dropdown-menu-scrollable" aria-labelledby="navbarDropdown">
            <li>
              <a class="dropdown-item" href="#">Submenu A &raquo; </a>
              <ul class="dropdown-menu dropdown-submenu">
                <li><a class="dropdown-item" href="#">Submenu A1</a></li>
                <li><a class="dropdown-item" href="#">Sebmenu A2</a></li>
              </ul>
            </li>
            <li>
              <a class="dropdown-item" href="#">Submenu B &raquo; </a>
              <ul class="dropdown-menu dropdown-submenu">
                <li><a class="dropdown-item" href="#">Submenu B1</a></li>
                <li><a class="dropdown-item" href="#">Submenu B2</a></li>
              </ul>
            </li>
            <li><a class="dropdown-item" href="#">Menu 1</a></li>
            <li><a class="dropdown-item" href="#">Menu 2</a></li>
            <li><a class="dropdown-item" href="#">Menu 3</a></li>
            <li><a class="dropdown-item" href="#">Menu 4</a></li>
            <li><a class="dropdown-item" href="#">Menu 5</a></li>
            <li><a class="dropdown-item" href="#">Menu 6</a></li>
            <li><a class="dropdown-item" href="#">Menu 7</a></li>
            <li><a class="dropdown-item" href="#">Menu 8</a></li>
            <li><a class="dropdown-item" href="#">Menu 9</a></li>
            <li><a class="dropdown-item" href="#">Menu 10</a></li>
            <li><a class="dropdown-item" href="#">Menu 11</a></li>
            <li><a class="dropdown-item" href="#">Menu 12</a></li>
            <li><a class="dropdown-item" href="#">Menu 13</a></li>
            <li><a class="dropdown-item" href="#">Menu 14</a></li>
            <li><a class="dropdown-item" href="#">Menu 15</a></li>
            <li><a class="dropdown-item" href="#">Menu 16</a></li>
            <li><a class="dropdown-item" href="#">Menu 17</a></li>
            <li><a class="dropdown-item" href="#">Menu 18</a></li>
            <li><a class="dropdown-item" href="#">Menu 19</a></li>
            <li><a class="dropdown-item" href="#">Menu 20</a></li>
            <li><a class="dropdown-item" href="#">Menu 21</a></li>
            <li><a class="dropdown-item" href="#">Menu 22</a></li>
            <li><a class="dropdown-item" href="#">Menu 23</a></li>
            <li><a class="dropdown-item" href="#">Menu 24</a></li>
            <li><a class="dropdown-item" href="#">Menu 25</a></li>
            <li><a class="dropdown-item" href="#">Menu 26</a></li>
            <li><a class="dropdown-item" href="#">Menu 27</a></li>
            <li><a class="dropdown-item" href="#">Menu 28</a></li>
            <li><a class="dropdown-item" href="#">Menu 29</a></li>
            <li><a class="dropdown-item" href="#">Menu 30</a></li>
            <li><a class="dropdown-item" href="#">Menu 31</a></li>
            <li><a class="dropdown-item" href="#">Menu 32</a></li>
            <li><a class="dropdown-item" href="#">Menu 33</a></li>
            <li><a class="dropdown-item" href="#">Menu 34</a></li>
            <li><a class="dropdown-item" href="#">Menu 35</a></li>
            <li><a class="dropdown-item" href="#">Menu 36</a></li>
            <li><a class="dropdown-item" href="#">Menu 37</a></li>
            <li><a class="dropdown-item" href="#">Menu 38</a></li>
            <li><a class="dropdown-item" href="#">Menu 39</a></li>
            <li><a class="dropdown-item" href="#">Menu 40</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

the dropdown navbar looks like this:

but i want it something like this:

is there any way i can get the expected dropdown with vertical scrollbar, i already try many suggestion and alternative but still not worked