style single bootstrap 3 nav dropdown link - css

Question

I have the following Bootstrap3 Nav menu (fiddle here). I'd like to style the link text (and hover) of the 'Highlight' item as well its child links differently from the dropdown 1 and 2 links. I'd also like to be able to style the child links (and hover) differently from the Highlight parent link. I can style the background (as shown), but I haven't been able to find the correct style for the links. Suggestions?
My HTML:
<div class="container">
<!-- Static navbar -->
<div class="navbar navbar-inverse" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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="#">Project name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
Dropdown 1<b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</li>
<li class="dropdown">
Dropdown 2<b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</li>
<li class="dropdown highlight">
Highlight<b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</div>
</div> <!-- /container -->
My CSS:
![#import url('http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css');
.highlight{ background-color:#eeaf41;}
.highlight a {
font-weight:bold;
}
.highlight a:hover {
background-color:#FFA;
}.highlight a:active {
position:relative;
top:1px;
color:#999;
}
.dropdown-menu li a {color:#900000}][2]

Answer 1

Here are a few selectors you can choose from. They ensure that the other styling will be overwritten by taking the specificity into account. Additionally, they make use of the child combinator, >, in order to style only the direct sibling elements (in case more are nested).
Example Here
Selector for the .highlight element when open/closed, respectively:
.nav.navbar-nav .highlight.open > a,
.highlight {
/* ... */
}
Selector for the .highlight element on hover:
.nav.navbar-nav .highlight > a:hover {
/* ... */
}
Selector for the direct child ul element (submenu elements):
.nav.navbar-nav .highlight > ul {
/* ... */
}
Selector for styling the submenu elements on hover:
.navbar-nav .highlight.open .dropdown-menu > li > a:hover {
/* ... */
}