JSFiddle - React, Tailwind, and code Playground

by senica

HTML

<div class="menu">
    <div class="item">
        <span>Item 1</span>
        <div class="submenu">
            Here is a drop down for 1
        </div>
    </div>
    <div class="item">
        <span>Item 2</span>
        <div class="submenu">
            Here is a srlkasjdfk;laesf
        </div>
    </div>
    <div class="item">
        <span>Item 3</span>
        <div class="submenu">
            ;askfj;laksdf
        </div>
    </div>
</div>

CSS

.menu{
    width:100%;
}
.menu .item{
    display:inline-block;
    border:1px solid #000;
    margin-right:10px;
    padding:15px;
    position:relative;
}

.menu .submenu{
    position: absolute;
    top: 50px;
    left: 0px;
    background: #00F;
    padding: 20px;
    color: #FFF;
    display:none;
}

JavaScript

$(".menu .item").on("click", function(e){
    e.preventDefault();
    var t = $(".submenu", this);
    $(".submenu").not(t).fadeOut();
    $(".submenu", this).fadeToggle();
    return false;
});

$(".submenu").on("click", function(){
    return false;   
});

$(window).on("click", function(){
   $(".submenu").fadeOut();
    myFunc();
});

//myFunc();

var myFunc = function(){
    alert("hello");   
}