'CSS: Covering entire block of element

Having a problem trying to fill the entire block with background-color when hovering over an item. When hovering over it only covers the text, not the entire block.

<nav>
    <ul>
        <li><a href="#home"> Example </a></li>
        <li><a href="#home"> Stuff </a></li>
        <li><a href="#home"> Things </a></li>
        <li><a href="#home"> Content </a></li>
    </ul>
</nav>

And my style:

nav {
  width: 100%;
  background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
  display: flex;
  justify-content: end;
}

ul {
  list-style: none;
  overflow: hidden;
}

li {
  display: inline-block;
}

a {
  padding: 8px 14px;
  text-decoration: none;
  color: white;
}

a:hover {
  background-color: #333;
  border-radius: 6px;
}
htmlcss


Solution 1:[1]

You have added overflow property to your ul and it was not allowing a to show its full width. Just removed it and I guess it works fine.

    nav {
      width: 100%;
      background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
      display: flex;
      justify-content: end;
    }

    ul {
      list-style: none;
    }

    li {
      display: inline-block;
    }

    a {
      padding: 8px 14px;
      text-decoration: none;
      color: white;
    }

    a:hover {
      background-color: #333;
      border-radius: 6px;
    }
    <nav>
            <ul>
              <li><a href="#home"> Example </a></li>
              <li><a href="#home"> Stuff </a></li>
              <li><a href="#home"> Things </a></li>
              <li><a href="#home"> Content </a></li>
            </ul>
    </nav>

Solution 2:[2]

You just need to add margin: 0; padding: 0; from UL and remove overflow: hidden;

Refer below:

 nav {
  width: 100%;
  background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
  display: flex;
  justify-content: end;
  padding: 10px;
  box-sizing: border-box;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  display: inline-block;
}

a {
  padding: 8px 14px;
  text-decoration: none;
  color: white;
}

a:hover {
  background-color: #333;
  border-radius: 6px;
}
<nav>
        <ul>
          <li><a href="#home"> Example </a></li>
          <li><a href="#home"> Stuff </a></li>
          <li><a href="#home"> Things </a></li>
          <li><a href="#home"> Content </a></li>
        </ul>
</nav>

Solution 3:[3]

    nav {
        width: 100%;
        background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
        display: flex;
        justify-content: end;
       }

     ul {
         list-style: none;
        overflow: hidden;
      }

    li {
          display: inline-block;
       }

      a {
         padding: 8px 14px;
         text-decoration: none;
          color: white;
       }

       a:hover {
               color: #333;
          border-radius: 6px;
       }

try this css. Do not use background color property only use color

Solution 4:[4]

you can make the following changes

smaple image

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
}

li {
  float: right;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}
<ul>
          <li><a href="#home"> Example </a></li>
          <li><a href="#home"> Stuff </a></li>
          <li><a href="#home"> Things </a></li>
          <li><a href="#home"> Content </a></li>
        </ul>

Solution 5:[5]

You can try this. you have to set a padding on your a:hover to cover the entire navigation set the ul padding and margin to 0 as well so you can attain and cover the entire li 

 nav {
  width: 100%;
  background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
  display: flex;
  justify-content: end;
  padding: 10px;
  box-sizing: border-box;
}

ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

li {
  display: inline-block;
}

a {
  padding: 8px 14px;
  text-decoration: none;
  color: white;
}

a:hover {
  background-color: #333;
  border-radius: 6px;
  padding: 11px 14px;
}
<nav>
        <ul>
          <li><a href="#home"> Example </a></li>
          <li><a href="#home"> Stuff </a></li>
          <li><a href="#home"> Things </a></li>
          <li><a href="#home"> Content </a></li>
        </ul>
</nav>

Solution 6:[6]

Just add display:block to the a element.

nav {
  width: 100%;
  background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
  display: flex;
  justify-content: end;
}

ul {
  list-style: none;
  overflow: hidden;
}

li {
  display: inline-block;
}

a {
  padding: 8px 14px;
  text-decoration: none;
  color: white;
  display: block;
}

a:hover {
  background-color: #333;
  border-radius: 6px;
}
<nav>
        <ul>
          <li><a href="#home"> Example </a></li>
          <li><a href="#home"> Stuff </a></li>
          <li><a href="#home"> Things </a></li>
          <li><a href="#home"> Content </a></li>
        </ul>
</nav>

Solution 7:[7]

The first thing is to move your nav css style to your ul style. the nav tag do not need styling (in you case). What needs styling is : ul, li, a. Keep in mind that html tags have a default styling applied by your navigator. that css should be reset before starting to style any tag. In your example we would add to the ul tag:

ul {
  margin:0;
  padding: 0;

}

Then you apply style accordingly to what you desire. For example :

nav {
 /* Nothing here */
}

ul {
  list-style: none;
  overflow: hidden;

 /* This is important */
  margin:0;
  padding: 0;

  width: 100%; /* width 100% has no effect here. It can be safely removed */
  background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
  display: flex;
  justify-content: end;
}

example output image

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Ashish sah
Solution 2
Solution 3 Pinal Sukhadiya
Solution 4 Fadedrifleman
Solution 5
Solution 6 Kevin
Solution 7

Related Questions