JSFiddle - React, Tailwind, and code Playground

HTML

<div style="height: 77px">
       <div class="hover">hover</div>
   </div>
   
   <hr>
   
   <ul>
       <li class="hover-li">ich 1</li>
       <li class="hover-li">ich 2</li>
       <li class="hover-li">ich 3</li>
       <li class="hover-li">ich 4</li>
       <li class="hover-li">ich 5</li>
   </ul>

CSS

.hover {
            width: 300px;
            height: 77px;
            line-height: 77px;
            text-align: center;
            border: 1px solid #ddd;
            font-size: 27px;
            display: none;
        }
        
        li {
            cursor: pointer;
        }

JavaScript

var timer;
    var dropdownLink = $("ul .hover-li");
    var dropdownBlock = $('.hover');
    dropdownLink.on("mouseover", function () {
        clearTimeout(timer);
        dropdownBlock.fadeIn();
    }).on("mouseleave", function () {
        timer = setTimeout(
            function () {
                dropdownBlock.fadeOut();
            }, 600);
    });