JSFiddle - React, Tailwind, and code Playground

by jimjeffers

HTML

<ul id="menu-navigatie" class="menu">
    <li>
        <a href="#">Item 1</a>
    </li>
    <li class="current-menu-parent">
        <a href="#">Item 2</a>
        
            <ul class="sub-menu">
                <li class="current-menu-item">
                    <a href="#">Item 2a</a>
                </li>
                <li>
                    <a href="#">Item 2b</a>
                </li>
            </ul>
    </li>
</ul>

CSS

#menu-navigatie { }


#menu-navigatie li { padding-left: 10px;}

#menu-navigatie .current-menu-item a { font-weight: bold; color: #f05a28;}
    
#menu-navigatie .sub-menu {  display: none;}

#menu-navigatie .sub-menu li {  margin-left: 5px;}
#menu-navigatie .current-menu-item .sub-menu,

#menu-navigatie .current-menu-ancestor .sub-menu { display: block; padding-left: 5px; border: none;}

JavaScript

$(function(){
    $('#menu-navigatie>li>ul').each(function(){
        if($(this).parent().hasClass("current-menu-parent")) 
        { 
            $(this).show();
        } else {
            $(this).hide(); 
        }
    });
    $('#menu-navigatie>li').mouseover(function(){
        // check that the menu is not currently animated
        if ($('#menu-navigatie ul:animated').size() == 0) {
            // create a reference to the active element (this)
            // so we don't have to keep creating a jQuery object
            $heading = $(this);
            // create a reference to visible sibling elements
            // so we don't have to keep creating a jQuery object
            $expandedSiblings = $heading.siblings().find('ul:visible');
            if ($expandedSiblings.size() > 0) {
                $expandedSiblings.slideUp(500, function(){
                    $heading.find('ul').slideDown(500);
                });
            }
            else {
                $heading.find('ul').slideDown(1000);
            }
        }
    });
});