JSFiddle - React, Tailwind, and code Playground

by cmruser

HTML

<nav id="nav" role="navigation">
    <ul>
        <li><a href="#"><i></i><span>Dashboard</span></a></li>
        <li>
            <a href="#"><i></i><span>Lists</span><span class="caret"></span></a>
            <ul>
                <li><a href="#">Company</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">Sales</a></li>
                <li><a href="#">Referrals</a></li>
            </ul>
        </li>
        <li><a href="#"><i></i><span>Campaigns</span></a></li>
        <li>
            <a href="#"><i></i><span>Tools</span><span class="caret"></span></a>
            <ul>
                <li><a href="#">Email</a></li>
                <li><a href="#">Reports</a></li>
                <li><a href="#">Documents</a></li>
                <li><a href="#">Gamification</a></li>
            </ul>
        </li>
        <li><a href="#"><i></i><span>Support</span></a></li>
    </ul>
</nav>

CSS

#nav ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    float: left;
}
#nav ul>li {
    float: left;
    position: relative;
    margin: 0;
}

#nav ul>li>a {
    display: block;
    padding: 10px 15px;
}

#nav ul ul {
    border: 2px solid #666;
    background: #fff;
	position:absolute;
	display:none;
}

#nav ul ul li {
	float:none;
	display:block;
	}
#nav ul ul a {
    padding: 6px 15px;
}
#nav ul ul a:hover {
    background: #ddd;
}

#nav li.open ul { display:block;}

JavaScript

$("#nav a").click(function(e) {	
    var t = $(this);
    if (t.next().length !== 0) {
        e.preventDefault();
        e.stopPropagation();
        var n = t.parent();
        //var r = t.parents();
        t.parents().find(".open").not(n).each(function() {
            var e = $(this);
            e.removeClass("open");
            //e.find("i").removeClass("icon")
        });
        n.toggleClass("open");
        //t.find("i").toggleClass("icon")
    } else {
        e.preventDefault();
        e.stopPropagation();
        t.parents().find(".open").each(function() {
           var e = $(this);
           e.removeClass("open");
        });
    }
	t.parents().on("click", function(e) {
		e.preventDefault();
		e.stopPropagation();
		$("#nav ul>li").removeClass("open");
	});
})