JSFiddle - React, Tailwind, and code Playground

by Meligy

HTML

<div id="container">
    <a href="#" id="opener">open</a>
    <div id="menu">
        It's opened<br />
        <input /><br />
        Here
    </div>
</div>

CSS

#opener {
    display: inline-block;
    background: #eee;
    padding: 5px 7px;
}

#menu {
    width: auto;
    background: #efe;
}

#container {
    display: inline-block;
}

JavaScript

$("#menu")
    .hide()
    .on("mouseenter", function(){
        $(this).data("hover", true);
        $(this).show();
    })
    .on("mouseleave", function(){
        $(this).data("hover", false);
        $(this).fadeOut(200);
    });


$("#opener")
    .on("mouseenter", function(){
        $("#menu").show();
    })
    .on("mouseleave", function(){
        setTimeout(function(){
            var menuHovered = $("#menu").data("hover");
            if(!menuHovered) {
                $("#menu").fadeOut(200);
            }
        }, 50);
    });