JSFiddle - React, Tailwind, and code Playground

by Brett East

HTML

<div class="nav-menu">
                <ul class="nav-menu-inner">
                    <li>
                        <a href="connexion">Home</a>
                    </li>
                    <li>
                        <a class="menu-has-sub" href="about-us">About us <i class="fa fa-angle-down"></i></a>
                        <!-- Dropdown -->
                        <ul class="sub-dropdown dropdown">
                            <li>
                                <a class="menu-has-sub" href="clients-case-studies">Clients and Case Studies</a>

                            </li>
                        </ul>
                        <!-- End Dropdown -->
                        </li>
                        </ul>
                        </div>

JavaScript

var menu_Sub = $(".menu-has-sub");
var menu_Sub_Li;
$(".mobile-device .menu-has-sub").find(".fa:first").removeClass("fa-angle-right").addClass("fa-angle-down");
menu_Sub.click(function (e) {
    if ($(".header").hasClass("mobile-device")) {
        menu_Sub_Li = $(this).parent("li:first");
        if (menu_Sub_Li.hasClass("menu-opened")) {
            menu_Sub_Li.find(".sub-dropdown:first").slideUp(function () {
                menu_Sub_Li.removeClass("menu-opened");
                menu_Sub_Li.find(".menu-has-sub").find(".fa:first").removeClass("fa-angle-up").addClass("fa-angle-down");
            });
        }
        else {
            $(this).find(".fa:first").removeClass("fa-angle-down").addClass("fa-angle-up");
            menu_Sub_Li.addClass("menu-opened");
            menu_Sub_Li.find(".sub-dropdown:first").slideDown();
        }
        return false;
    }
    else {
    	//return false;
    }
});
menu_Sub_Li = menu_Sub.parent("li");
menu_Sub_Li.hover(function () {
    if (!($(".header").hasClass("mobile-device"))) {
        $(this).find(".sub-dropdown:first").stop(true, true).fadeIn("fast");
    }
}, function () {
    if (!($(".header").hasClass("mobile-device"))) {
        $(this).find(".sub-dropdown:first").stop(true, true).delay(100).fadeOut("fast");
    }
});