JSFiddle - React, Tailwind, and code Playground

by Paul Leech

HTML

<div id="target">
            Hover here
            <div id="dropdown">Dropdown</div>
        </div>

CSS

#target {
  width: 300px;
  height: 30px;
  position: relative;
  background: red;
}

#dropdown {
  position: absolute;
  width: 100%;
  height: 200px;
  background: green;
  display: none;
}

JavaScript

var target = document.getElementById('target');
var dropdown = document.getElementById('dropdown');
var curEl;

document.onmousemove = function(e) {
  e = e || window.event;
  curEl = e.target || e.srcElement;
}

target.onmouseover = function(e) {
  setTimeout(function() {
    if (curEl === target || curEl === dropdown) {
      dropdown.style.display = "block";
    } else {
      dropdown.style.display = "none";
    }
  }, 300);
}

target.onmouseout = dropdown.onmouseout = function() {
  setTimeout(function() {
    if (curEl !== target && curEl !== dropdown) {
      dropdown.style.display = "none";
    }
  }, 1000);
}