How to make a:hover is block color to those parent container in flexbox?

Issue

For now, I learn to create a navbar with flex, This is my codepen : Codepen

I want anchor tag in li when hovering, it will give background color entire height in li, With sass, like this :

 ul {
      list-style-type: none;
      width: 33%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 4rem;
      li {
        a {
          text-decoration: none;
          color: $color-0;
        }

        a:hover {
          background-color: $color-8;
        }
      }
    }

From this :

To this :

Solution

Try this piece of styling in your ul selector

 li {
            height:100%;
            width:100%;
            // background-color:#000;
            display:flex;
            justify-content:center;
            align-items:center;
            
            
            a {
              text-decoration: none;
              color: $color-0;
            }
    
                          }
          li:hover{
                background-color:$color-8;
            }

Also edit the padding of ul selector to padding: 0 0 0 2rem; so the nav-links get stucked to extreme right as shown in the image

Answered By - Abbas Shaikh