JSFiddle - React, Tailwind, and code Playground

by NicoO

HTML

<div id="container">
    <input type="text" />
    <ul>
        <li>Fancy</li>
        <li>Stuff</li>
    </ul>
</div>

CSS

ul
{
    margin: 0;
    padding; 0;
    border: 1px solid blue;
    display: none;
}

ul.open
{
    display: block;
}

li
{
    display: block;
}

JavaScript

var container = document.getElementById("container");
var list = container.querySelector("ul");

var closeModal = function(event){
    
    if(container.contains(event.target))
        return;
    
    list.classList.remove("open");
    document.removeEventListener("click", closeModal);
}

container.addEventListener("mouseenter", function(event){
    list.classList.add("open");
    document.addEventListener("click", closeModal);
})