JSFiddle - React, Tailwind, and code Playground

by elizabethkmathew

HTML

<ul class="menu">
  <li class="vt-menu menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1483 show"><a>Virtual Tour</a>
<ul class="sub-menu mCustomScrollbar _mCS_1" ><div id="mCSB_1" class="mCustomScrollBox mCS-light mCSB_vertical mCSB_inside" style="max-height: 100.037px;" tabindex="0"><div id="mCSB_1_container" class="mCSB_container" style="position:relative; top:0; left:0;" dir="ltr">
	<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1391"><a href="https://www.1213walnut.com/virtual-tour/">1213 Walnut</a></li>
	<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1484"><a href="https://www.1213walnut.com/virtual-tour/s1-tour/">S1 Tour</a></li>
	<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1485"><a href="https://www.1213walnut.com/virtual-tour/s3-tour/">S3 Tour</a></li>
	<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1486"><a href="https://www.1213walnut.com/virtual-tour/a1-tour/">A1 Tour</a></li>
	<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1487"><a href="https://www.1213walnut.com/virtual-tour/a2-tour/">A2 Tour</a></li>
	<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1488"><a href="https://www.1213walnut.com/virtual-tour/a3-tour/">A3 Tour</a></li>
	<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1489"><a href="https://www.1213walnut.com/virtual-tour/a5-tour/">A5 Tour</a></li>
	<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1490"><a href="https://www.1213walnut.com/virtual-tour/a7-tour/">A7 Tour</a></li>
	<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1491"><a href="https://www.1213walnut.com/virtual-tour/a8-tour/">A8 Tour</a></li>
	<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1492"><a...

CSS

.vt-menu ul {
    position: absolute;
    top: 10px;
    left: -25px;
    display: none;
    background: rgba(210, 93, 18,0.9);
    z-index: 1;
    height: 120px;
    padding: 10px 0;
    min-width: 120px;
    margin: 0;
}
.vt-menu {
    position: relative;
}

JavaScript

// $("li.vt-menu").hover(function () {
    //     $(this).children('ul').slideToggle();
    // });
    		$(".vt-menu").on('mouseover', function() {
          $('.vt-menu').addClass('show');
          $('.vt-menu ul.sub-menu').stop().slideDown();
        });
        $(".vt-menu").on('mouseleave', function() {
          $('.vt-menu').removeClass('show');
          $('.vt-menu ul.sub-menu').stop().slideUp();
        });