JSFiddle - React, Tailwind, and code Playground

HTML

<div style="vertical-align:top;">
    <ul class="navbar cf">
        <!-- <li><a href="#">item 2</a></li> -->
        <li style="width:200px;background:222;"><a href="#" class="caption">starting item</a>

            <ul>
                <li><a href="#">sub item 1</a>

                </li>
                <li><a href="#">sub item 2</a>

                </li>
                <li><a href="#">sub item 3</a>

                    <ul>
                        <li><a href="#">google</a>

                        </li>
                        <li><a href="#">yahoo!</a>

                        </li>
                        <li><a href="#">jQuery</a>

                        </li>
                    </ul>
                </li>
                <li><a href="#">item a little longer</a>

                </li>
            </ul>
        </li>
    </ul>
</div>

CSS

/* clearfix */

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
 .cf:before, .cf:after {
    content:" ";
    /* 1 */
    display: table;
    /* 2 */
}
.cf:after {
    clear: both;
}
/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
 .cf {
    *zoom: 1;
}
ul.navbar {
    background: #222222;
    /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url();
    background: -moz-linear-gradient(top, #222222 0%, #161616 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #222222), color-stop(100%, #161616));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #222222 0%, #161616 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #222222 0%, #161616 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #222222 0%, #161616 100%);
    /* IE10+ */
    background: linear-gradient(to bottom, #222222 0%, #161616 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#222222', endColorstr='#161616', GradientType=0);
    /* IE6-8 */
    width: 200px;
    margin: auto;
    border-radius: 3px;
    box-shadow: inset 0 1px 0 #555;
}
ul.navbar li {
    float: left;
    margin: 0;
    position: relative;
}
ul.navbar li a {
    display: block;
    /*padding: 13px 44px;*/
    padding:8px 5px;
    color: white !important;
    text-decoration: none;
    text-transform: none;
    transition: all .2s ease-in-out;
}
ul.navbar li a:hover, ul.navbar li:hover > a {
    background: #39bae6;
    color:...

JavaScript

// sub menus identification
$(function () {
    $(".navbar").on("click", "li", function (event) {
        var liElm = $(event.target).closest("li");
        $(".navbar .caption").text(liElm.find("a:first").text());
        $(".navbar li").removeClass("active");
        liElm.addClass("active");
    });
});