我有一个自举导航栏,我想上色。只有当导航栏上的按钮被点击时才会显示下拉菜单,而不是悬停,因此适用于移动用户。Bootstrap 3导航栏颜色下拉按钮,当激活
现在它显示为白色,并且按钮处于活动状态时文本颜色会变黑。当它被盘旋时,它会变成更深的蓝色阴影,这是我希望它在活动时保持蓝色的阴影。我已经尝试了很多其他的例子,例如.active> a:focus和.active> a:active,但都不起作用。
的导航栏的HTML代码低于:
<nav id="menu" class="navbar navbar-default">
<div class="container-fluid" id="fullNav">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarBody" aria-expanded="false" id="collapsedNavbarExpand">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar" ></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">Logo</a>
</div>
<div class="collapse navbar-collapse" id="navbarBody">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle navOption" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
Tourism
<span class="caret"> </span>
</a>
<ul class="dropdown-menu">
<li> <a href="../Pages/tourismHub.html"> <b> Tourism Hub </b> </a> </li>
<li role="separator" class="divider"></li>
<li> <a href="../Pages/eatingOut.html"> Eating Out </a> </li>
<li> <a href="../Pages/attractions.html"> Attractions </a> </li>
<li> <a href="../Pages/events.html"> Events </a> </li>
<li> <a href="../Pages/history.html"> Town History </a> </li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle navOption" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
Residents
<span class="caret"> </span>
</a>
<ul class="dropdown-menu">
<li> <a href="../Pages/residentsHub.html"> <b> Residents Hub </b> </a> </li>
<li role="separator" class="divider"></li>
<li> <a href="../Pages/events.html"> Events </a> </li>
<li> <a href="../Pages/eatingOut.html"> Eating Out </a> </li>
<li> <a href="../Pages/history.html"> History </a> </li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle navOption" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
Prospective Residents
<span class="caret"> </span>
</a>
<ul class="dropdown-menu">
<li> <a href="../Pages/prospectiveResidentsHub.html"> <b> Prospective Residents Hub </b> </a> </li>
<li role="separator" class="divider"></li>
<li> <a href="../Pages/realEstate.html"> Real Estate </a> </li>
<li> <a href="../Pages/attractions.html"> Attractions </a> </li>
<li> <a href="../Pages/history.html"> Town History </a> </li>
<li> <a href="../Pages/eatingOut.html"> Eating Out </a> </li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle navOption" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
Locations
<span class="caret"> </span>
</a>
<ul class="dropdown-menu">
<li> <a href="../Pages/locationsHub.html"> <b> Locations Hub </b> </a> </li>
<li role="separator" class="divider"></li>
<li> <a href="../Pages/marina.html"> Marina </a> </li>
<li> <a href="../Pages/highStreet.html"> High Street </a> </li>
<li> <a href="../Pages/parishWharf.html"> Parish Wharf </a> </li>
<li> <a href="../Pages/lakeGrounds.html"> Lake Grounds </a> </li>
</ul>
</li>
<li> <a href="../Pages/map.html" class="navOption"> Map </a> </li>
</ul>
</div>
</div>
</nav>
缩进有点破损,由于其粘贴了我的网站。 CSS代码可以在JSFiddle中看到。 bootstrap.js,bootstrap.css和jquery-2.2.0.js被进一步导入页面。
以下链接了一个可用的JSFiddle示例。要查看实际效果,您必须展开结果窗口,以便导航栏不会折叠。您也必须从一个下拉按钮中删除您的鼠标一旦点击看到它变成白色。
这里是的jsfiddle链接:https://jsfiddle.net/hezejk88/9/
的任何解决方案,将是巨大的感谢!
啊,因为你解释得更好我删除了我的答案! :) –