JSFiddle - React, Tailwind, and code Playground

HTML

<div id="dropdown_shopping_cart"></div>
<button>Show Shopping Cart</div>

CSS

#dropdown_shopping_cart{
    position: absolute;
    width:100%;
    height:50px;
    top:0;
    left:0;
    background-color:green;
    display:none;
}

button{
    margin-top: 60px;
}

JavaScript

$("button").click(function(){
	$('#dropdown_shopping_cart').slideDown(800);
    hideShoppingCart();
});

function hideShoppingCart(){
    setTimeout(function () { 
        if(!$('#dropdown_shopping_cart').is(':hover')){
            $('#dropdown_shopping_cart').slideUp(800);
        }
        else{
            $('#dropdown_shopping_cart').one("mouseleave",function(){
                $('#dropdown_shopping_cart').slideUp(800);
            });
        }
    }, 3000);
}