JSFiddle - React, Tailwind, and code Playground

Reside V.3 Main Navigation

by Jennifer Perrin

HTML

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
<div class="container">
    <div class="navbar navbar-default" role="navigation">
        <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="#"><img src="http://jennperrin.com/dev/reside/images/logo.png" /></a>
        </div>
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav navbar-right pt-10">
                <li class="active"><a href="#">Home</a></li>
                <li>
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Lots o' Levels <i class="fa fa-angle-down"></i></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>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                        <li class="divider"></li>
                        <li><a href="#">One more separated link</a></li>
                        <li class="dropdown-submenu">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                               ...

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:200,300,400,700);

html, body {
    color: #444444;
    font-family:'Open Sans';
    background: #f0f0f0;
    margin: 0;
    padding: 0;
}
* { border-radius: 0 !important; }
.pt-10 { padding-top: 10px !important; }

.navbar-default {
    background-color: #ffffff;
    border-color: #ffffff;
    min-height: 75px;
}

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
    background-color: #ffffff;
    color: #2581bc;
}
.navbar-nav li a {
    padding: 15px 20px 15px 15px;
    text-transform: uppercase;
}
.navbar-nav li a:before {
    color: #dcdcdc;
    content: "|";
    position: absolute;
    right: 0;
    top: 15px;
}
.navbar-nav li.last a:before {
    display: none;
}
.navbar-nav li a .fa { margin-left: 3px; }

.navbar-default .navbar-collapse, .navbar-default .navbar-form {
    border-color: transparent;
}

.navbar-right .dropdown-menu {
    left: -4px;
    right: auto;
}

/* ----------------------------------- */

.dropdown-menu { padding: 0; }
.dropdown-menu > li > a {
    clear: both;
    color: #ffffff;
    background: #333333;
    display: block;
    font-weight: 300;
    line-height: 1.42857;
    padding: 10px 20px;
    white-space: nowrap;
    min-width: 160px;
}
.dropdown-menu > li > a:before {
    display: none;
}

.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
    background-color: #2581bc;
    color: #f0f0f0;
    text-decoration: none;
}
.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
    background-color: #2581bc;
    color: #ffffff;
    outline: 0 none;
    text-decoration: none;
}

.dropdown-menu .divider {
    background-color: #444444;
    height: 1px;
    margin: 0;
    overflow: hidden;
}

/*...

JavaScript

$(document).ready( function() {
    $("li.dropdown-submenu > a").on("click", function(){
        $("li.dropdown-submenu").removeClass("active");
        $(this).parent().addClass("active");
        //return false;
    });
});