My navigation header includes links to various websites, some of which are displayed as drop-down menus. I have implemented an animation and style change on hover to visually indicate the active link and display all available options in case of a dropdown menu. However, after showing the dropdown menu, the styling and animation applied to internal links remain consistent with the main links, resulting in the underline always appearing in the same location rather than below each individual link. Thank you for your time and assistance. Here is an example link demonstrating the current behavior:
Template snippet:
<div id="row">
<div class="col-xs-12">
<header>
<nav class="navbar navbar-expand-lg navbar-light header">
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav menu">
<!-- Navigation links go here -->
</ul>
</div>
</nav>
</header>
</div>
</div>
CSS styling:
<!-- CSS styling goes here -->