I am looking for a way to create something like my below example but only using javascript or jquery. Currently my example is using bootstrap and popper.js.
Also.. what would you call this type of dropdown/flyout menu? When searching Google the only results i get are where the flyout menu is top aligned with the link you hovered/clicked on instead of aligned to the top of the parent dropdown(image example at bottom of post).

Here is my code so far showing what i am looking for:

https://codepen.io/theller5567/pen/PogrPJa

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<nav class="navbar navbar-expand-sm navbar-light " id="bootstrap-edits">

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
 </button>

Dropdown link

    <ul class="dropdown-menu add-to-ul" aria-labelledby="navbarDropdownMenuLink">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" data-toggle="dropdown" href="#">Something else here</a>
        <div class="dropdown-menu top add-to-dropdown-div">
          <a class="dropdown-item" href="#">A</a>
          <a class="dropdown-item" href="#">b</a>
          <a class="dropdown-item" href="#">b</a>
          <a class="dropdown-item" href="#">b</a>
          <a class="dropdown-item" href="#">b</a> <a class="dropdown-item" href="#">b</a> <a class="dropdown-item" href="#">b</a>


        </div>
      </li>
      <li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" data-toggle="dropdown" href="#">Bead Mills</a>
        <div class="dropdown-menu top add-to-dropdown-div">
          <a class="dropdown-item" href="#">gt</a>
          <a class="dropdown-item" href="#">sr</a>
          <a class="dropdown-item" href="#">sb</a>
          <a class="dropdown-item" href="#">boob</a>
          <a class="dropdown-item" href="#">bat</a> <a class="dropdown-item" href="#">b</a> <a class="dropdown-item" href="#">b</a>


        </div>
      </li>
    </ul>
  </li>
</ul>

This is what i don’t want:

Any help would be greatly appreciated.