Expected behavior

i want an Animated dropdown in my Navbar on Hover.

Actual behavior

i added the following code in my custom CSS:

  .dropdown:hover>.dropdown-menu {
          display: block;
        }

   .dropdown>.dropdown-toggle:active {
            pointer-events: none;
        }

this works with hover but i lost the animated effect from the dropdown. Any idea what's wrong? Thank You

Resources (screenshots, code snippets etc.)

<!-- Dropdown -->
            <li class="nav-item dropdown">
              <a
                class="nav-link dropdown-toggle"
                href="#"
                id="navbarDropdownMenuLink"
                role="button"
                data-mdb-toggle="dropdown"
                aria-expanded="false"
              >
              <i class="fas fa-users"></i> Dropdown
              </a>
              <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDropdownMenuLink">
                <li>
                  <a class="dropdown-item" href="#">Action</a>
                </li>
                <li>
                  <a class="dropdown-item" href="#">Another action</a>
                </li>
                <li><hr class="dropdown-divider" /></li>
                <li>
                  <a class="dropdown-item" href="#">Something else here</a>
                </li>
              </ul>
            </li>