JSFiddle - React, Tailwind, and code Playground

by xKloc

HTML

<nav class="optionCont">
            <ul><li>
                    <a href="#">Menu Item</a><ul  class="dropMenuCont"><li>
                            <a href="#">Sub Menu</a></li><li>
                            <a href="#">Sub Menu</a></li><li>
                            <a href="#">Sub Menu</a></li><li>
                            <a href="#">Sub Menu</a></li></ul></li><li>
                    <a href="#">Menu Item</a><ul><li>
                            <a href="#">Sub Menu</a></li><li>
                            <a href="#">Sub Menu</a></li><li>
                            <a href="#">Sub Menu</a></li></ul></li></ul>
            </nav>

CSS

nav 
{
    background-color: #7A8F9F;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
}
body nav ul {
    padding: 0px 0px 0px 0px;
    position: relative;
    margin: 0px 0px 0px 0px;
    text-align: left;
    text-decoration: none;
}
body nav ul li 
{
    list-style: none;
    display: inline-block;
    margin: 0px 0px 0px 0px;
    padding 0px 0px 0px 0px;
}
body nav ul li a {
    padding: 11px 15px;
    font-weight: 100;
    text-decoration: none;
    line-height: 2.8em;
    color: #FFF;
    background-color: #7A8F9F;
    margin: 0px 0px 0px 0px;
}
body nav ul li a:hover {
    background-color: #8A9FAF;
    color: #fff;
    text-decoration: none;
    border: 1px solid #000;
}
body nav ul li a:active {
    background-color: #7A8F9F;
    text-decoration: none;
}
body nav ul li.selected a {
    background-color: #fff;
    color: #000;
    border: 0px;
}
    body nav ul li a:visited {
    display:block;
    padding:0px 5px 0px 5px;
    margin: 0px 0px 0px 0px;
    text-decoration: none;
}
body nav ul ul {
    display: none;
    position:absolute;
    background: #FFF;
    color: #000;
    border: 1px solid #000;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    width: 150px;
}
body nav ul ul li 
{
    display:block;
    color: #000;
    border: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
}
body nav ul ul li a{
    display:block;
    color: #000;
    border: 0px 0px 0px 0px;
    padding:0px 5px 0px 5px;
    margin: 0px 0px 0px 0px;
    background-color: #FFF;
    text-decoration: none;
}
body nav ul ul li a:hover {
    background-color: #8A9FAF;
    color: #fff;
    text-decoration: none;
    border: 1px solid #000;
}
body nav ul ul li a:active {
    background-color: #7A8F9F;
    text-decoration: none;
}
body nav ul ul li.selected a {
    background-color: #7A8F9F;
    color: #000;
    border: 0px;
}

JavaScript

$(function() {
    $("body nav li").each(function() {
        if ($(this).find("ul").length > 0) {
            $(this).mousedown(function() {
                $(this).find("ul").stop(true, true).slideToggle();
            });
        }
    });
});