Keep main nav item hover CSS when hovering over dropdown - css

Question

I am using Bootstrap 4, and have created a navigation that has a large dropdown menu, using animate.css for the dropdown CSS animation and a CSS transition on the main navigation element (underline).
Is it possible to keep the main navigation underlined when a user hovers over the sub-menu/dropdown? In this case, keep the "Services" main nav element underlined when mousing over the dropdown. I'd like to keep it pure CSS if possible, but if not, open to using jQuery.
Here's the HTML of my navigation:
<nav class="navbar navbar-expand-lg navbar-light" role="navigation">
<div class="navbar-brand">
Logo
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#global-navbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="global-navbar">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link main-nav-link" href="#" #*role="button" data-toggle="dropdown"*#>
Services
<span class="navigation-underline animated slideInLeft"></span>
</a>
<div class="dropdown-menu animated fadeIn">
<div class="container">
<div class="row">
<div class="col-md-3">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="#">Service 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Service 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Service 3</a>
</li>
</ul>
</div>
<div class="col-md-3">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="#">Service 4</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Service 5</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Service 6</a>
</li>
</ul>
</div>
<div class="col-md-3">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="#">Service 7</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Service 8</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Service 9</a>
</li>
</ul>
</div>
<div class="col-md-3 border-right-0">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="#">Service 10</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Service 11</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Service 12</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<!-- more <li>s -->
</ul>
</div>
</nav>
Here's my CSS:
#media screen and (min-width: 992px) {
/* Link column styling */
.navbar .dropdown-menu div[class*="col"] { margin-top: 1em; margin-bottom: 1em; border-right: 1px solid #ffffff; }
.navbar .dropdown-menu { border: none; background-color: #e5e5e5 !important; }
.navbar { font-size: .9em; padding-top: 0px; padding-bottom: 0px; }
.navbar .navbar-brand { padding-top: 0; padding-bottom: 0; }
/* Add padding to keep hover working when mousing to menu */
.navbar .nav-item { padding: .75em .5em 0 .5em; margin: 0 .25em; }
/* Dropdown full width */
.navbar .dropdown { position: static; }
.navbar .dropdown-menu { width: 100%; left: 0; right: 0; /* Height of nav-item --> */ top: 67px; border-radius: 0; }
.navbar .dropdown-menu .dropdown-menu-heading { padding-left: .5em; text-transform: uppercase; font-weight: 700; color: #424242; }
/* Show dropdown menu on hover */
.navbar .dropdown:hover .dropdown-menu,
.navbar .dropdown .dropdown-menu:hover { -webkit-animation-duration: .3s; animation-duration: .3s; -webkit-animation-delay: .3s; animation-delay: .3s; display: block; }
/* Less padding on dropdown menu items and links */
.navbar .navbar-nav .nav.flex-column .nav-link { padding-top: 2px; }
.navbar .dropdown .dropdown-menu .flex-column li.nav-item { padding: 0; }
/* Animate border-bottom for links */
.navbar .navbar-nav .nav-link.main-nav-link::after { content: ''; display: block; width: 0%; height: 2px; background: #eb2b2c; transition: width .3s; }
.navbar .navbar-nav .nav-link.main-nav-link:hover::after { width: 100%; }
}

Answer 1

Since the .nav-item .dropdown element gets an additional .show class when is clicked, you can maintain the underlined effect with the following css:
.nav-item.dropdown.show > .nav-link::after {
width: 100%;
}
Alternatively, you could also use this one:
.nav-item.dropdown:hover > .nav-link::after {
width: 100%;
}
However, as there is a gap between the .nav-link and the .dropdown-menu, the :hover state is not set while the cursor is moving between the menu item and the dropdown.