JSFiddle - React, Tailwind, and code Playground

by Ehsan Sajjad

HTML

<div id="nav_wrap">
<div id="nav">
    <ul>
        <li><a href="#">parent</a>

            <ul>
                <li><a href="#">child</a>
                </li>
                <li><a href="#">child</a>
                </li>
                <li><a href="#">child</a>
                </li>
                <li><a href="#">child</a>
                </li>
                <li><a href="#">child</a>
                </li>
                <li class="last_item"><a class="last_item" href="#">child</a>
                </li>
            </ul>
        </li>
        <li><a href="#">parent</a>

            <ul>
                <li><a href="#">child</a>
                </li>
                <li><a href="#">child</a>
                </li>
                <li><a href="#">child</a>
                </li>
                <li><a class="last_item" href="#">child/a></li>
                </ul>
                </li>
                <li><a href="#">parent</a>
                </li>
                <li style="border-right:1px solid #171717"><a a href="#">parent</a>
                </li>
            </ul>
</div>
    </div>

CSS

#nav_wrap {
	background: #000;
	height: 60px
}

#nav {
    float: right;
}
#nav ul {
    list-style-type: none;
}
#nav li a {
    font-size: 0.9em;
    color: #FFF;
    display: block;
    padding: 0 26px;
    text-decoration: none;

    font-family: opensans;
    text-transform: uppercase;
}
#nav li a:hover {
    background: #1B1A1A;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
#nav ul li {
    float: left;
    position: relative;
}
#nav ul li a {
    text-align: center;
    padding: 0 26px;
    display: block;
    text-decoration: none;
    color: #FFF;
    line-height: 60px;
}
#nav > ul > li > ul {
    display: none;
}
#nav > ul > li.active > ul {
    display: block;
    position: absolute;
}
#nav ul li.active ul li a {
    background: none repeat scroll 0 0 #232323;
    border-left: medium none;
    color: #FFFFFF;
    display: block;
    font-family: opensans;
    font-size: 0.8em;
    line-height: 35px;
    text-align: left;
    width: 190px;
    padding: 0 15px;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
    text-transform:capitalize;
}
#nav ul li.active ul li a:hover {
    background: #069;
    color: #fff;
}
#nav ul li ul li {
    border-top:1px solid #2A2A2A
}
.last_item {
    border-radius: 0 0 3px 3px;
}
.home {
    vertical-align: middle;
    padding-bottom: 5px;
}

JavaScript

$("#nav > ul > li").on('click', function(){
    $("#nav ul li").removeClass("active");
    $(this).toggleClass('active');
});

$("#nav ul").on("blur",function(){

    $(this).find("ul"),removeClass("active");

})