JSFiddle - React, Tailwind, and code Playground

by LinkinTED

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 () {
    jQuery('.drop').slideUp(0);
    
        jQuery('.has-drop-down').hover(
        function () {
            jQuery(this).find('.drop').slideDown(500);
        },
        
        function () {
            jQuery(this).find('.drop').slideUp(500);
        }
    );
});