CSS Selector Bootstrap navbar menu links - css

Question

Bootstrap newb here. Having trouble finding the right selector to color the links in the menu. I've tried .nav a:link, a:hover but the hyperlink and hover color stays on the default blue/grey.
<div class="navbar navbar-static-top">
<div class="containerNav">
<div class="navbar-header"> Test
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> <span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home
</li>
<li>Blog
</li>
<li class="dropdown"> Social media <b class = "caret"></b>
<ul class="dropdown-menu">
<li>Twitter
</li>
<li>Facebook
</li>
<li>Google+
</li>
<li>Instagram
</li>
</ul>
<li>About
</li>
<li>Contact
</li>
</ul>
</div>
<!-- end container -->
</div>
</div>
<!-- end nav bar -->
Using bootstrap 3.2. http://jsfiddle.net/nwjob2e0/ . (In JS fiddle my icon-bar is hidden under where it says 'result' so if youpress that the list should expand and you can see what I mean.
http://jsfiddle.net/nwjob2e0/#&togetherjs=ioVBLnT3mA - collab

Answer 1

Try this:
.navbar .navbar-nav > li > a {
color: #999;
}
And for Active, Hover, Focus:
.navbar .navbar-nav > li > a:hover,
.navbar .navbar-nav > li > a:focus {
color: #fff;
background-color: #000;
}
Update:
To modify dropdowns (like social media menu in your example):
.navbar .navbar-nav .open .dropdown-menu {
background-color: green;
}
.navbar .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar .navbar-nav .open .dropdown-menu > li > a:focus {
background-color: red;
}
Check JSFiddle Demo
Update2:
Also you can use This Online Tool to generate a Bootstrap NavBar easily.