These two values were conflicting with eachother so I re-wrote them:
nav ul li a:hover{
background-color: rgb(0, 153, 102);
color: black;
}
nav ul ul li a:hover{
background: rgb(0, 92, 61);
color: white;
Into this:
nav ul li a.light:hover{
background-color: rgb(0, 153, 102);
color: black;
}
nav ul ul li:hover{
background: rgb(0, 92, 61);
color: white;
}
I assigned the main header links a class of .light, and changed the next css code to just call the list and not the individual link which allows the entire background to change color all the way across.
*{
font-family: sans-serif;
margin: 0;
padding: 0;
user-select: none;
}
body{
background: #f2f2f2;
}
nav{
background: white;
}
nav:after{
clear: both;
content: '';
display: table;
}
nav .logo{
color: black;
float: left;
font-family: sans-serif;
font-size: 30px;
font-weight: 500;
line-height: 70px;
padding-left: 120px;
}
nav ul{
float: right;
list-style: none;
margin-right: 60px;
position: relative;
}
nav ul li{
background: white;
display: inline-block;
text-align: center;
}
nav ul li a{
color: rgb(77, 77, 77);
display: inline-block;
font-size: 15px;
line-height: 70px;
margin: 1px;
padding: 0 20px;
text-decoration: none;
}
nav ul li a.light:hover{
background-color: rgb(0, 153, 102);
color: black;
}
nav ul ul li:hover{
background: rgb(0, 92, 61);
color: white;
}
nav ul ul{
background-color: rgb(0, 153, 102);
opacity: 0;
position: absolute;
visibility: hidden;
}
nav ul ul ul{
border-top: none;
}
nav ul li:hover > ul{
opacity: 1;
top: 70px;
visibility: visible;
}
nav ul ul li{
background-color: rgb(0, 153, 102);
display: list-item;
font-weight: lighter;
float: none;
position: relative;
width: 100%;
padding: 0;
}
nav ul ul li a{
color: white;
line-height: 50px;
}
nav ul ul ul li{
left: 150px;
position: relative;
top: -60px;
width: 100%;
}
.show,.icon,input{
display: none;
}
.fa-plus{
font-size: 15px;
margin-left: 40px;
}
.image{
height: 1100px;
width: 2200px;
}
.hr{
background-color: rgb(0, 153, 102);
border: none;
height: 9px;
}
@media all and (max-width: 968px) {
nav ul{
float: left;
margin-right: 0px;
}
.show + a, ul{
display: none;
}
nav ul li,nav ul ul li{
display: block;
width: 100%;
}
nav ul li a:hover{
box-shadow: none;
width: 100%;
}
.show{
color: rgb(0, 153, 102);
cursor: pointer;
display: block;
font-size: 18px;
line-height: 70px;
padding: 0 10px;
}
.show:hover{
color: black;
}
.icon{
background-color: black;
color: rgb(0, 153, 102);
cursor: pointer;
display: block;
font-size: 25px;
line-height: 70px;
position: absolute;
right: 40px;
top: 0;
}
nav ul ul{
border-top: 0px;
top: 70px;
float: none;
position: static;
display: none;
opacity: 1;
visibility: visible;
}
nav ul ul a{
padding-left: 40px;
}
nav ul ul ul li{
position: static;
}
.content{
z-index: -1;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<title>WEBSITE</title>
<link rel="stylesheet" href="style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<nav>
<div class="logo">
WEBSITE
</div>
<label for="btn" class="icon">
<span class="fa fa-bars"></span>
</label>
<input type="checkbox" id="btn" />
<ul>
<li>
<label for="btn-1" class="show">ABOUT +</label>
<a class="light" href="#">ABOUT</a>
<input type="checkbox" id="btn-1" />
<ul>
<li><a href="#">OUR STORY</a></li>
<li><a href="#">OUR COMMITMENT TO YOU</a></li>
</ul>
</li>
<li><a class="light" href="#">LOCATIONS</a></li>
<li>
<label for="btn-2" class="show">PRODUCTS +</label>
<a class="light" href="#">PRODUCTS</a>
<input type="checkbox" id="btn-2" />
<ul>
<li><a href="#">NEW ARRIVALS</a></li>
<li><a href="#">FEATURED</a></li>
<li><a href="#">TOP RATED</a></li>
<li><a href="#">HIS</a></li>
<li><a href="#">HERS</a></li>
<li><a href="#">KIDS</a></li>
<li><a href="#">ACCESSORIES</a></li>
<li><a href="#">SPRING CATALOG</a></li>
<li><a href="#">THE ESSENTIALS</a></li>
<li><a href="#">SALE</a></li>
</ul>
</li>
<li><a class="light" href="#">BLOG</a></li>
<li><a class="light" href="#">CONTACT</a></li>
</ul>
</nav>
<hr class="hr" />
<div class="content">
<section>
<img class="image" src="Vibrant.jpg" alt="Human Jumping In Converses" />
</section>
</div>
</body>
</html>