Can't change highlight hover color in a nav bar using Materialize CSS

I want to change the hover bg color in a nav bar for another one using MaterializeCSS , the default effect just make the highlight darker, i need to change that highlight to another color like white.

When the navbar color is black, there is no highlight or hover effect.

I can change the bg of the nav bar color, the text color but i can't change the background highlight color, any ideas?

Thank you in advance

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.2/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.2/js/materialize.min.js"></script>

<style>    
nav ul li a{
  color: orange;
}    
</style>
</head>

<body>
<header class="top-nav">

<div class="navbar-fixed">
  <nav>
    <div class="nav-wrapper black blue-text">
      <a href="#!" class="brand-logo center">Logo</a>
      <ul class="left hide-on-med-and-down">
        <li><a href="sass.html">Sass</a></li>
        <li><a href="badges.html">Components</a></li>
        <li class="active"><a href="collapsible.html">JavaScript</a></li>
      </ul>
    </div>
  </nav>
</div>

</header>
<main></main>
<footer></footer>
</body>
</html>

In Jsbin here :)

Solution

Just add this rule to your css:

nav ul li:hover {
   background-color: white;
}

It changes the background color of the item on hover. In this example: http://jsbin.com/yemegejeye/edit?html,output it's white.