navbar dropdown wrong hover color/behaviour

<!--Navbar-->

<mdb-navbar SideClass="navbar navbar-expand-lg navbar-dark indigo">

  <!-- Navbar brand -->

  <logo><a class="navbar-brand" href="#">TEST</a></logo>

  <!-- Collapsible content -->

  <links>

    <!-- Links -->

    <ul class="navbar-nav mr-auto">

      <li class="nav-item active">

        <a class="nav-link waves-light" mdbRippleRadius>Home<span class="sr-only">(current)</span></a>

      </li>

     

      <li class="nav-item">

        <a class="nav-link waves-light" mdbRippleRadius>Pricing</a>

      </li>

      <!-- Dropdown -->

      <li class="nav-item dropdown" dropdown>

        <a dropdownToggle mdbRippleRadius type="button" class="nav-link dropdown-toggle waves-light">

        Basic dropdown<span class="caret"></span></a>

        <div *dropdownMenu class="dropdown-menu dropdown dropdown-primary" role="menu">

            <a class="dropdown-item waves-light" href="#">Action</a>

            <a class="dropdown-item waves-light" mdbRippleRadius href="#">Another action</a>

            <a class="dropdown-item waves-light" mdbRippleRadius href="#">Something else here</a>

            <div class="divider dropdown-divider"></div>

            <a class="dropdown-item waves-light" mdbRippleRadius href="#">Separated link</a>

        </div>

    </li>

    </ul>

    <!-- Links -->

    <!-- Search form

<form class="form-inline  waves-light" mdbRippleRadius>

   <input class="form-control mr-sm-2" type="text" placeholder="Search">

</form>

-->

  </links>

  <!-- Collapsible content -->

</mdb-navbar>

<!--/.Navbar-->