Customize Bootstrap Navbar Tab Color - html

Question

I'm working on my first bootstrap project, I'm having some difficulty making changes to the navbar, I've spent a few hours researching but I keep coming up blank on one item in particular. When clicked the list item that is circled in the below image turns the standard bootstrap grey, I want it to match the background color, black.
And while I'm asking I would also like to change the color on the dropdown as well.
Here is my markup :
<nav role="navigation" class="navbar navbar-default navbar-fixed-top navbar-custom">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle btn-lg">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">
<img alt="brand" class="image-responsive" src="traclogo.png" height="140px" width="260px"></img>
</a>
</div>
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Products<b class="caret"></b></a>
<ul role="menu" class="dropdown-menu">
<li>Suspension Kits</li>
<li>Light Bar Mounts</li>
<li>Custom Fabrication</li>
</ul>
</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Builds<b class="caret"></b></a>
<ul role="menu" class="dropdown-menu">
<li>Tacoma</li>
<li>Bronco</li>
<li>Hot Rods</li>
<li>Everything Else</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</nav>

Answer 1

You would want to change the tab color on focus. The dropdown style is controlled .dropdown-menu class and its descendent classes.
.navbar-default .navbar-nav > .open > a:focus {
background: #000 !important; /* Avoid !important, added for the sake of SO snippet priority */
color: #fff !important;
}
.dropdown-menu {
background: lightblue !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav role="navigation" class="navbar navbar-default navbar-fixed-top navbar-custom">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle btn-lg">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">
<img alt="brand" class="image-responsive" src="traclogo.png" height="140px" width="260px">
</a>
</div>
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home
</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Products<b class="caret"></b></a>
<ul role="menu" class="dropdown-menu">
<li>Suspension Kits
</li>
<li>Light Bar Mounts
</li>
<li>Custom Fabrication
</li>
</ul>
</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Builds<b class="caret"></b></a>
<ul role="menu" class="dropdown-menu">
<li>Tacoma
</li>
<li>Bronco
</li>
<li>Hot Rods
</li>
<li>Everything Else
</li>
</ul>
</li>
<li>Contact Us
</li>
</ul>
</div>
</div>
</nav>