JSFiddle - React, Tailwind, and code Playground

by Takuro Hishikawa

HTML

<h1>D2DRAFT Dropdown Menu</h1>
<nav role="navigation">
    <ul class="menu">
        <li class="menu-item has-dropdown" role="menuitem"><a href="#1">Nav Item 1 ▼</a>
            <ul class="child-menu">
                <li class="menu-item" role="menuitem"><a href="#2">Child Item 1</a></li>
                <li class="menu-item" role="menuitem"><a href="#3">Child Item 2</a></li>
                <li class="menu-item" role="menuitem"><a href="#4">Child Item 3</a></li>
            </ul>
        </li>
        <li class="menu-item has-dropdown" role="menuitem"><a href="#5">Nav Item 2 ▼</a>
            <ul class="child-menu">
                <li class="menu-item" role="menuitem"><a href="#6">Child Item 1</a></li>
                <li class="menu-item" role="menuitem"><a href="#7">Child Item 2</a></li>
                <li class="menu-item" role="menuitem"><a href="#8">Child Item 3</a></li>
            </ul>
        </li>
        <li class="menu-item" role="menuitem"><a href="#9">Nav Item 3</a></li>
    </ul>
</nav>

CSS

/*
.menu > li.menu-item {
    display: block;
    float: left;
    border: 1px solid gray;
    width: 30%;
}
.child-menu { display: none; }
.child-menu-display { display: block; }
.menu-item a:focus + .child-menu {
    display: block;
}
*/
.menu,
.child-menu {
	margin: 0;
	padding: 0;
	list-style: none;
    font-size: .9em;
}

.menu > li {
    position: relative;
}

.menu > li.menu-item {
    display: block;
    float: left;
    list-style: none;
    /* border: 1px solid gray; */
}
.child-menu {
	display: none;
	width: 100%;
	top: 42px;
    position: absolute;
}
.child-menu li {
	height: 35px;
}
.child-menu-display { display: block;

}

.menu-item a:focus + .child-menu {
    display: block;
}


.menu > li.menu-item a {
	display: block;
    padding: 10px 20px;
    color: #fff;
    text-decoration: none;
    border-right: solid 1px #fff;
	background-color: #111;
    background-image: linear-gradient(#444, #111);
   }

.menu > li.menu-item a:hover,
.menu > li.menu-item a:focus {
    background-color: #ba4200;
    background-image: linear-gradient(#ee6905, #ba4200);
    outline: none;
   }

JavaScript

$(function(){
    $('.menu > .menu-item > a').bind('mouseover focus',function(){
        $('.child-menu').removeClass('child-menu-display');
        $(this).parent().find('.child-menu').addClass('child-menu-display');
    });
    /*
    $('.menu').bind('mouseout',function(){
        $('.child-menu').removeClass('child-menu-display');
    });
    */
});