JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<ul>
    	<li class="menu">
        	Меню
        </li>
    </ul>
    <div class="drop">
      <ul>
		    <li>пункт 1</li>
		    <li>пункт 2</li>
      </ul>
    </div>
</body>

CSS

@charset "utf-8";
/* CSS Document */
ul {
	padding: 0;
	margin: 0;
	list-style: none;
}
ul li {
	border: 1px solid #000000;
	padding: 10px;
	cursor: pointer;
	margin-bottom: -1px;
}
.menu {
	display: inline-block;
	border: 1px solid red;
	margin-bottom: 10px;
}
.drop {
	display: none;
}
.drop ul {
  display: inline-block;
}
.drop ul li:hover {
  background: green;
}

JavaScript

$(".menu").on("mouseover", function() {
	var timer = setTimeout(function() {
		$(".drop").slideDown("slow");
	}, 500);
	$(".menu").on("mouseout", function() {
		clearTimeout(timer);
	});
});
$(".drop ul").on("mouseleave", function() {
    $(".drop").slideUp("slow");
});