When my mouse is on the bottom border, the hover effect does not work. How can I make the bottom border part of the list container and count as one element? Currently, when the mouse is on the bottom border, the element loses its hover effect.
<style>
li.nav-item:hover{
border-bottom:5px solid yellow;
}
</style>
<body style="height:1500px">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
<a class="navbar-brand" href="#">Logo</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</nav>