Mark Mark - 1 year ago 48
CSS Question

Issue with hover not filling height of navbar

I'm having a hard time getting the background-color to go to the top of the navbar when hovered over. As of now it only highlights a little more than the text. Is there something simple I'm missing? I put a jsfiddle below to help show it.


<li><h1><a id="nav_logo" href="/index.php">This is a Test</a></h1></li>
<li><a class="nav_link" href="/index.php">Home</a></li>
<li><a class="nav_link" href="/pages/about.php">About</a></li>
<li><a class="nav_link" href="#">1</a></li>
<li><a class="nav_link" href="#">2</a></li>
<li><a class="nav_link" href="#">3</a></li>
<li><a class="nav_link" href="#">4</a></li>
<li><a class="nav_link" href="#">5</a></li>


nav ul{
list-style: none;
background-color: #333;
padding: 0.8125rem;

nav li{
display: inline-block;

nav a{
text-decoration: none;
color: white;


background-color: #333;

padding-left: 2rem;

nav li a:hover{
background-color: black;

Answer Source

This happened because you gave padding-left to .nav_link and the background take the padding area as a part of element. you can change that by many ways :

1- you can change the padding-left to margin-left

2- you can use background-clip:content-box which will make the background ignoring the padding

background-clip: content-box;