我与PHP的活动类重叠与CSS风格

Question

 <ul>
    <li <?php if($pageid == 1) { echo 'class="active"'; } ?>><a class="nav-link" href="index.php?page=1">HOME</a></li>
    <li <?php if($pageid == 2) { echo 'class="active"'; } ?>><a class="nav-link" href="index.php?page=2">PORTFOLIO</a></li>
    <li <?php if($pageid == 3) { echo 'class="active"'; } ?>><a class="nav-link" href="index.php?page=3">ABOUT</a></li>
    <li <?php if($pageid == 4) { echo 'class="active"'; } ?>><a class="nav-link" href="index.php?page=4">CONTACT</a></li>
</ul>

that is my nav bar with active links and when i try to style it when is active it dosnt work as i expect.

.nav-link {
    font-family: 'Open Sans', sans-serif;
    text-transform: uppercase;
    transition: all .25s ease;
}

.nav-link:hover, .nav-link:focus {
    color: #ff9328;
    border-bottom: 1px solid #ff9328;
}

.active{
    border-bottom: 1px solid #ff9328;
}

See images for more clues on what anoys me u see home class is active and border is spreed all way as u can see on hover link about border bottom only cover text

Answer 1

You need to apply the active styling to the link, not the parent li. Change the last CSS code to:

.active .nav-link {
    border-bottom: 1px solid #ff9328;
}

Note that this is untested as the question lacks all the relevant CSS styling to test/reproduce this.