style single bootstrap 3 nav dropdown link

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">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 1<b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>  
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2<b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                        </ul>
                    </li>
                    <li class="dropdown highlight">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Highlight<b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></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]

Fiddle Image

@Justin: I don't think so. It looks like you changed the background color of the child items, but the parent and child link colors haven't changed...? I see you specified blue for all dropdown anchors, but that doesn't appear to have changed the link colors... — MTAdmin
@MTAdmin Here are some selectors - jsfiddle.net/XXkd6 Let me know what you're looking for and ill post an answer. — Josh Crozier
@Josh Crozier Hmmm, I think I was just looking for .highlight a{color:#xxx}. Your post helped me get there though. Post your code for the child links (.donations a:link{color:#xxx}) and I'll give you credit for the answer. — MTAdmin

Josh Crozier Josh Crozier · Accepted Answer · 2014-05-07T18:01:21

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 {
    /* ... */
}

style single bootstrap 3 nav dropdown link

1 Answers