I've been attempting to change the background-color of the dropdown menu to red, but my code doesn't seem to be working properly. Here is the current code that I am using:
HTML
<div class="divMenu">
<ul class="menu">
<li><a href="index.html">HOME</a></li>
<li>
<a href="brands.html">BRANDS</a>
<ul>
<li><a>Brand 1</a></li>
<li><a>Brand 2</a></li>
<li><a>Brand 3</a></li>
</ul>
</li>
<li>
<a href="categories.html">CATEGORIES</a>
<ul>
<li><a>Category 1</a></li>
<li><a>Category 2</a></li>
<li><a>Category 3</a></li>
</ul>
</li>
<li><a href="new_arrivals.html">NEW ARRIVALS</a></li>
<li><a href="contact.html">CONTACT</a></li>
</ul>
</div>
CSS
.divMenu ul.menu > li {list-style: none; color: #000; font-weight: bold; float: left; padding: 5px 25px;}
.divMenu ul.menu > li a {text-decoration: none; color: #000;}
.divMenu ul.menu > li:hover {background-color: #f44336; cursor: pointer;}
.divMenu ul.menu > li a:hover {background-color: #f44336; color: #fff!important; cursor: pointer;}
.divMenu ul.menu ul {display: none; list-style-type: none; background-color: #f44336;}
.divMenu ul.menu > li:hover ul {display: block; padding: 0; margin: 0; z-index: 10; position: absolute;}
The result can be seen in the image below: