0
当您单击关于选项卡时，它将显示一个下拉菜单。下拉列表中的元素具有淡蓝色背景。现在，当您将鼠标从About移开时，当下拉菜单仍处于活动状态时，背景为白色。我想将白色背景更改为浅蓝色背景。我怎样才能做到这一点？我感谢您的帮助。谢谢！在离开鼠标后更改导航栏中选项卡的背景颜色
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Theme Made By www.w3schools.com - No Copyright -->
<title>Bootstrap Theme Company Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href="http://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
.navbar {
margin-bottom: 0;
background-color: #B21A09;
z-index: 9999;
border: 0;
font-size: 12px !important;
line-height: 1.42857143 !important;
letter-spacing: 4px;
border-radius: 0;
font-family: Montserrat, sans-serif;
}
.navbar li a, .navbar .navbar-brand {
color: #fff !important;
}
.navbar-default .navbar-toggle {
border-color: transparent;
color: #fff !important;
}
.dropdown-menu {
background-color: #5A79A5;
}
.navbar-nav li a:hover, a:visited, .navbar-nav li.active a {
background-color: #5A79A5 !important;
}
.dropdown-menu li a:hover {
background-color: #9CAAC6 !important;
}
a:active.dropdown-toggle {
background-color: #5A79A5 !important;
}
</style>
</head>
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60">
<nav class="navbar navbar-default main">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="index.html">HOME</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">ABOUT
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">A</a></li>
<li><a href="#">B</a></li>
<li><a href="#">C</a></li>
<li><a href="#">D</a></li>
<li><a href="#">E</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
这样做了！谢谢！ – kofhearts
这是非常令人困惑的。上面选择使用上面的选择元素类的下拉菜单类开放的后裔切换但它似乎不是下拉菜单 - 切换类元素是open的后代，我也切换了命令.dropdown-toggle .open并且它没有工作，请你澄清一下吗？谢谢！ – kofhearts
我重新编辑了我的解决方案。 。 –