https://i.sstatic.net/mOp5G.png
The hover effect does not cover the entire height of the link. How can I fix this issue?
I am aware that the color combination is not correct, but it's only for testing*
I am currently using Bootstrap 4.3.1
.navbar .collapse ul li{
}
.navbar .collapse ul li a{
font-family: 'Comfortaa', cursive;
font-size: 20px;
color: skyblue !important;
}
.navbar .collapse ul li a:hover{
background-color: deepskyblue;
height: 100%;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<a class="navbar-brand mx-5" href="#">
<img src="Resources/Images/bootstrap-solid.svg" width="30" height="30" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto mx-3">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">News</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>