【发布时间】：2020-11-18 12:07:21
【问题描述】：
我当前的导航栏是一个粘性下拉导航栏，它会在悬停而不是点击时下拉。我试图在我的标签上有一个底部边框。当鼠标悬停在选项卡上时它可以工作，但是一旦鼠标离开选项卡（甚至只是下拉菜单项），即使下拉菜单仍然打开，底部边框也会消失。我在选项卡上的所有其他悬停操作也消失了（当悬停时我将文本颜色设置为黑色）。这是有道理的，一旦鼠标没有悬停，更改就不会停留在那里，但是活动标签不起作用，所以我被卡住了。
基本上，我希望在下拉菜单打开时保留底部边框。
这是我的 HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<title>ExhibitLab</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script>
$(document).ready(function(){
$(".dropdown, .btn-group").hover(function(){
var dropdownMenu = $(this).children(".dropdown-menu");
if(dropdownMenu.is(":visible")){
dropdownMenu.parent().toggleClass("open");
}
});
});
</script>
<link rel="stylesheet" type="text/css" href="header.css">
</head>
<body>
<!--Navbar with dropdown menu-->
<nav id="myNavbar" class="navbar navbar-default navbar-fixed-top" style="background-color:white" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="home.html" style="color:#002873; font-size:35px;font-weight:bold;">ExhibitLab</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav" style="font-size:15px">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">About</a>
<ul class="dropdown-menu">
<li><a href="#">History</a></li>
<li><a href="#">Timeline</a></li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Publication</a>
<ul class="dropdown-menu">
<li><a href="#">Report</a></li>
<li><a href="#">Additional Sources</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#contact" class="material-icons" style="font-size:20px"> mail_outline </a></li>
<li><a href="#search" class="material-icons" style="font-size:20px">search</a></li>
</ul>
</div>
</div>
</nav>
</body>
</html>
还有我的 CSS：
@media screen and (min-width: 768px) {
.dropdown:hover .dropdown-menu, .btn-group:hover .dropdown-menu{
display: block;
}
.dropdown-menu{
margin-top: 0;
}
.dropdown-toggle{
margin-bottom: 2px;
}
.navbar .dropdown-toggle, .nav-tabs .dropdown-toggle{
margin-bottom: 0;
}
}
.navbar-nav a {
padding: 12px 20px;
text-decoration: none;
}
.navbar-nav li.dropdown a{
border-bottom: 5px solid transparent;
color:#787878;
}
.navbar-nav li.dropdown a:hover{
border-bottom: 5px solid #002873;
color: black !important;
background-color: transparent !important;
}
.navbar-nav ul.dropdown-menu {
box-shadow:none;
}
.navbar-nav ul.dropdown-menu a:hover{
border-bottom: 5px solid transparent;
}
【问题讨论】：
标签： html jquery css twitter-bootstrap