Mega Menu in MDB Standard

**Expected behavior** Mega menu that expands either on click or on hover as demonstrated in the example page.

**Actual behavior** When i copy the snippet in a sample page i have creted the module does not work at all. The nav bar is shown but no menu is displayed on click or on hover

**Resources (screenshots, code snippets etc.)**

MDB Trial

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/7.1.0/mdb.min.css" rel="stylesheet" />

<div class="collapse navbar-collapse" id="navbarExample2">
  <ul class="navbar-nav me-auto ps-lg-0" style="padding-left: 0.15rem">
    <li class="nav-item">
      <a class="nav-link" href="#">Regular link</a>
    </li>
    <li class="nav-item dropdown position-static">
      <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
        data-mdb-toggle="dropdown" aria-expanded="false">
        Mega menu
      </a>
      <div class="dropdown-menu w-100 mt-0" aria-labelledby="navbarDropdown" style="
                      border-top-left-radius: 0;
                      border-top-right-radius: 0;
                    ">
        <div class="container">
          <div class="row my-4">
            <div class="col-md-6 col-lg-3 mb-3 mb-lg-0">
              <div class="list-group list-group-flush">
                <p class="mb-0 list-group-item text-uppercase font-weight-bold">
                  Lorem ipsum
                </p>
                <a href="" class="list-group-item list-group-item-action">Dolor sit</a>
                <a href="" class="list-group-item list-group-item-action">Amet consectetur</a>
                <a href="" class="list-group-item list-group-item-action">Cras justo odio</a>
                <a href="" class="list-group-item list-group-item-action">Adipisicing elit</a>
              </div>
            </div>
            <div class="col-md-6 col-lg-3 mb-3 mb-lg-0">
              <div class="list-group list-group-flush">
                <p class="mb-0 list-group-item text-uppercase font-weight-bold">
                  Explicabo voluptas
                </p>
                <a href="" class="list-group-item list-group-item-action">Perspiciatis quo</a>
                <a href="" class="list-group-item list-group-item-action">Cras justo odio</a>
                <a href="" class="list-group-item list-group-item-action">Laudantium maiores</a>
                <a href="" class="list-group-item list-group-item-action">Provident dolor</a>
              </div>
            </div>
            <div class="col-md-6 col-lg-3 mb-3 mb-md-0">
              <div class="list-group list-group-flush">
                <p class="mb-0 list-group-item text-uppercase font-weight-bold">
                  Iste quaerato
                </p>
                <a href="" class="list-group-item list-group-item-action">Cras justo odio</a>
                <a href="" class="list-group-item list-group-item-action">Est iure</a>
                <a href="" class="list-group-item list-group-item-action">Praesentium</a>
                <a href="" class="list-group-item list-group-item-action">Laboriosam</a>
              </div>
            </div>
            <div class="col-md-6 col-lg-3">
              <div class="list-group list-group-flush">
                <p class="mb-0 list-group-item text-uppercase font-weight-bold">
                  Cras justo odio
                </p>
                <a href="" class="list-group-item list-group-item-action">Saepe</a>
                <a href="" class="list-group-item list-group-item-action">Vel alias</a>
                <a href="" class="list-group-item list-group-item-action">Sunt doloribus</a>
                <a href="" class="list-group-item list-group-item-action">Cum dolores</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>