>我正在使用 Bootstrap 4，并创建了一个导航，该导航具有一个大的下拉菜单，使用 animate.css用于下拉 CSS 动画和主导航元素上的 CSS 过渡(下划线)。
当用户将鼠标悬停在子菜单/下拉菜单上时，是否可以保留主导航下划线？在这种情况下，将鼠标悬停在下拉菜单上时，请保留"服务"主导航元素下划线。如果可能的话，我想保持纯CSS，但如果不是，请开放使用jQuery。
这是我导航的 HTML：
<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>
这是我的 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%; }
}
由于.nav-item .dropdown元素在单击时会获得额外的.show类，因此您可以使用以下 css 维护带下划线的效果：
.nav-item.dropdown.show > .nav-link::after {
width: 100%;
}
或者，您也可以使用这个：
.nav-item.dropdown:hover > .nav-link::after {
width: 100%;
}
但是，由于.nav-link和.dropdown-menu之间存在间隙，因此当光标在菜单项和下拉列表之间移动时，不会设置:hover状态。