I'm having trouble changing the background-color of list items to black when hovering over them. However, changing the color itself is working fine.
.nav li {
display: inline-block;
height: 100%;
padding: 0px 35px;
border-width: 0 1px 1px 0px;
border-color: white;
border-style: solid;
box-sizing: border-box;
line-height: 37px;
background: linear-gradient(rgb(81, 59, 192) 26%, rgb(183, 172, 237))
}
.nav li:hover {
background-color: black;
color: black;
}<ul class="nav">
<li>Lorem</li>
<li>Ipsum</li>
<li>dolor</li>
<li>amet</li>
</ul>