JSFiddle - React, Tailwind, and code Playground

by AntĂłnio Almeida

HTML

<div class="menu">
    <div class="element">Element menu A</div>
    <div class="cascading_menu">Cascading menu A</div>
</div>
<div class="menu">
    <div class="element">Element menu B</div>
    <div class="cascading_menu">Cascading menu B</div>
</div>
<div class="menu">
    <div class="element">Element menu C</div>
    <div class="cascading_menu">Cascading menu C</div>
</div>

CSS

.menu {
    float: left;
}
.element {
    width: 140px;
    background-color: #339;
    color: #FFF;
    margin: 4px 20px;
}
.cascading_menu {
    width: 140px;
    height: 50px;
    background-color: #339;
    color: #FFF;
    margin: 20px;
    display: none;
}

JavaScript

$(document).ready(function() {
    $('.menu').hover(function(){
        $(this).find(".cascading_menu").stop().slideDown();
    }, function(){
        $(this).find(".cascading_menu").delay(200).slideUp();
    });
});