Solution 1 :

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>

Problem :

I am trying to get the hover to extend all the way across to both sides of the sub-menu. I’ve tried to rewrite a bunch of elements to no avail. I also used chrome developer tools to try and pin-point the issue. After using chrome dev tools, it seemed like the issue regarding the hover not covering the entire text was with the padding in nav ul li a{. I tried to alter the padding and margin but without success. I’ve just started coding within the past year and I am a complete loss here.

    <!DOCTYPE html>
      <html lang="en" dir="ltr">
        <head>
        <meta charset="utf-8">
        <title>WEBSITE</title>
        <link rel="stylesheet" href="styles.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 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 href="#">LOCATIONS</a></li>
    <li>
          <label for="btn-2" class="show">PRODUCTS +</label>
          <a 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 href="#">BLOG</a></li>
    <li><a 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>
    
        *{
        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:hover{
        background-color: rgb(0, 153, 102);
        color: black;
        }
        nav ul ul li a: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;
          }

By

Leave a Reply

Your email address will not be published. Required fields are marked *