I am using the materialize CSS framework for my website. I have a dropdown on my website as well. When you click it and it shows the elements that are part of it, they have the correct background color, but when you hover, it acts like it is white and shades the white. May I please have help to make it correctly shade the black background I have.
<ul id="games" class="dropdown-content" tabindex="0" style="display: block; width: 143.188px; left: 1222.81px; top: 0px; height: 94px; transform-origin: 0px 0px; opacity: 1; transform: scaleX(1) scaleY(1);">
<li tabindex="0" class="brand-black"><a href="#!">We have no games at the moment.</a></li>
</ul>
.dropdown-content li:hover, .dropdown-content li.active {
background-color: #A10000 !important;
}
I changed the hover color of my custom dropdown putting that in my styles.css file. Use !important so you ensure that the changes will be applied.