Dropdown Hover- Can't Change Color

Hi i've seen this issue mentioned in a few other places, but I can't seem to resolve.

When i hover over the link in the dropdown, the text is white and has a lightish grey background so I cannot see the text.

Not sure what issue is but i do see that for a 'dropdown-item'  the class is showing as 'dropdown-item waves-effect waves-light' ...could that be a problem?

Anyways--I've added this code to my CSS file:

.navbar .btn-group .dropdown-menu a:hover {
 color: #000!important;
 }
 .navbar .btn-group .dropdown-menu a:active {
 color: #fff!important;
 }

Here is my code for where dropdown is:

<liclass="nav-item btn-group">
 <aclass="nav-link dropdown-toggle"id="navbarDropdownMenuLink"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false">Deals
 </a>
 <divclass="dropdown-menu dropdown-primary"aria-labelledby="navbarDropdownMenuLink">
 <aclass="dropdown-item"href="#">Action</a>
 <aclass="dropdown-item"href="#">Another action</a>
 <aclass="dropdown-item"href="#">Something else here</a>
 </div>
 </li>