CSS: Covering entire block of element-CodePudding

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

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;
}

CodePudding user response：

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>

CodePudding user response：

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>

CodePudding user response：

    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

CodePudding user response：

you can make the following changes

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>

CodePudding user response：

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>

CodePudding user response：

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>

CodePudding user response：

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