JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="tabnav">
    <li class="tab2"><a href="index2.html" class="btn-slide">My Leases</a></li>
    <li class="tab2"><a href="index2.html" class="btn-slide">You can hover over me too</a></li>
</ul>

<div id="clear"></div>

<div id="leases">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
    <div>Item 4</div>
</div>

CSS

.active {color: red; font-weight: bold }
#leases { border:1px solid black; width:200px }
#tabnav { list-style: none }
#tabnav li { float: left; margin-right: 20px }
#clear { clear: both; margin-bottom: 15px }

JavaScript

$(document).ready(function(){
  $("#leases").hide();

    var isMousedOver;

    var hideDropdown = function(a) {
            setTimeout( function() {
                if (isMousedOver) return;
                $("#leases").slideUp("medium");
                $(a).removeClass("active");
            }, 500);
    }

    $(".btn-slide").hover(
        function(){
            $("#leases").stop(true,true).slideDown("medium");
            isMousedOver = true;
            $(".btn-slide").removeClass("active");
            $(this).addClass("active");
            var that = this;
            $("#leases").data("mouseoutfn", function() { hideDropdown(that) });
        },
        function(){
            isMousedOver = false;
            hideDropdown(this);
        }
    );

    $("#leases").hover(
        function() {
            isMousedOver = true;
        },
        function() {
            isMousedOver = false;
            $(this).data("mouseoutfn")();
        }
    );

});