JSFiddle - React, Tailwind, and code Playground

by DannyEnglander

HTML

<div class="header-nav-menu">
    <ul class="nav">
        <li><a href="http://www.google.com">One</a></li><li>
        <a class="has_children" href="http://www.google.com">Two</a>
            <ul>
                <li><a href="http://www.google.com">2A</a></li><li>
                <a href="http://www.google.com">2B</a>

                </li>
                <li><a href="http://www.google.com">2C</a>

                </li>
            </ul>
        </li><li>
        <a class="has_children" href="http://www.google.com">Three</a>
            <ul>
                <li><a href="http://www.google.com">3A</a>

                </li>
                <li> <a class="has_children" href="http://www.google.com">3B</a>

                    <ul>
                        <li><a href="http://www.google.com">3BI</a>

                        </li>
                        <li><a href="http://www.google.com">3BII</a>

                        </li>
                        <li><a href="http://www.google.com">3BIII</a>

                        </li>
                    </ul>
                </li>
                <li><a href="http://www.google.com">3C</a>

                </li>
            </ul>
        </li><li>
        <a href="http://www.google.com">Four</a></li><li>
        <a href="http://www.google.com">Five</a></li>
    </ul>
</div>

CSS

* {
    padding: 0;
    margin: 0;
}
.header-nav-menu {
    font-size: 1.2em;
    clear: both;
    width: 100%;
    border-bottom: 1px dotted;
    font-weight: bold
}
.header-nav-menu ul {
    position: relative;
    list-style-type: none;
    display: inline-block
}
.header-nav-menu ul ul {
    position: absolute;
    display: none;
    top: 100%;
    margin-left: -0.5px;
    z-index: 999
}
.header-nav-menu ul ul ul {
    left: 100%;
    top: -0.5px;
}
.header-nav-menu ul li:hover > ul,
.header-nav-menu ul li ul.open {
    display: inline-block;
}
.header-nav-menu ul ul li {
    position: relative;
    min-width: 160px;
}
.header-nav-menu a {
    text-decoration: none;
    display: block;
    white-space: nowrap;
    padding: 5px 10px;
}
.header-nav-menu ul ul a {
    border: 1px solid;
    border-top: 0px;
    padding: 5px 10px;
}
.header-nav-menu ul ul li:first-child {
    border-top:1px solid;
}
.header-nav-menu > ul > li {
    display: inline-block;
    border-right: 1px solid;
}
.header-nav-menu > ul > li:first-child {
    border-left: 1px solid;
}
.header-nav-menu, .header-nav-menu > ul > li, .header-nav-menu a, .header-nav-menu > ul > li:first-child {
    background-color: #b0d2c3;
    color: #022b19;
    border-color: #70b28d;
}
#mobile-search, #mobile-login, #mobile-menu .active-mobile-menu {
    background-color:#d5eade
}
.page-content {
    border-color: #b0d2c3
}
.header-nav-menu > ul > li:hover > a {
    background-color:#d5eade
}
.header-nav-menu > ul > li > a:hover {
    background-color:#e9faf2
}
/*Drop down Nav Menu*/
 .header-nav-menu ul ul a {
    background-color: #d5eade;
    border-color: #70b28d
}
.header-nav-menu ul ul li:first-child {
    border-top-color: #70b28d
}
.header-nav-menu ul ul a:hover {
    background-color:#e9faf2;
}

JavaScript

jQuery(document).ready(function () {
    $('.nav').on('click mousedown mouseup touchstart touchmove', 'a.has_children', function () {
        if ( $(this).next('ul').hasClass('open') && !$(this).parents('ul').hasClass('open')) {
            $('.open').removeClass('open');
            return false;
        }
        $('.open').not($(this).parents('ul')).removeClass('open');
        $(this).next('ul').addClass('open');
        return false;
    });
    $(document).on('click', ':not(.has_children, .has_children *)', function() {        
        if( $('.open').length > 0 ) {
            $('.open').removeClass('open');
            return false;
        }
    });
});