Removing hover effect on Materialize CSS links

I am working with the Materialize CSS navbar component. Each of the links get a hover effect that creates a visible box around the link. I am trying to get rid of this animation. I have tried overriding with no success thus far. Does anyone know how to remove this hover/active effect?

Solution

In the css source you can see:

nav ul a:hover {
   background-color: rgba(0, 0, 0, 0.1) !important;
}

Hence, you need to add in your css:

nav ul a:hover {
    background-color: rgba(0, 0, 0, 0) !important;
}

nav ul a:hover {
    background-color: rgba(0, 0, 0, 0) !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<nav>
    <div class="nav-wrapper">
        <a href="#" class="brand-logo">Logo</a>
        <ul id="nav-mobile" class="right hide-on-med-and-down">
            <li><a href="sass.html">Sass</a></li>
            <li><a href="badges.html">Components</a></li>
            <li><a href="collapsible.html">JavaScript</a></li>
        </ul>
    </div>
</nav>