JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="nav">
    <li class="has-drop-down">
        <a href="#">Search</a>
            <div class="drop" style="display: none;">
                <ul>
                    <li>
                        <ul class="">
                            <li class="item-107"><a href="#">link1</a></li>
                            <li class="item-108"><a href="#">link2</a></li>
                            <li class="item-109"><a href="#">link3</a></li>
                            <li class="item-148"><a href="#">link4</a></li>
                            <li class="item-170"><a href="#">link5</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
    </li>
</ul>

CSS

#nav .drop {
   
   padding: 27px 0 0;
   position: absolute;
   
}
.drop:hover,
.drop ul:hover {
   position:relative;
   top:-1px;
   display: block !important;
}
#nav .drop > ul {
   position: relative;
}
#nav a {
   display: inline-block;
   vertical-align: top;
   margin: 0 0 -27px;
   padding: 0 0 27px;
   position: relative;
}

JavaScript

jQuery(document).ready(function () {
        var t=1000;
        $('a').click(function () {
            alert('tg');
            t=setTimeout("showMenu()",500);
        });
    
  
});



   
     function showMenu(){
      jQuery('.drop').fadeIn(500);
      
    }