My problem: I want my background color to cover all the height of the navbar when on hover state. But it only covers a specific area and not full width of list item and height of the navbar.
Adjust the padding of your link such that the anchor’s height becomes equal to that of the navbar. When you set the padding, use relative sizing, not absolute units. That way every time the nav bar resizes, the anchor(along with its padding) will also resize relatively to cover the entire height of the navbar.
So then when you hover, the anchor ( inclusive of its entire padding which now spans the entire navbar height ) will get highlighted.