JSFiddle - React, Tailwind, and code Playground

by Rian Ariona

HTML

<header>
  <ul class="menu">
    <li data-sub="#product" class="menu__item"><a href="#">Product</a></li>
    <li data-sub="#developer" class="menu__item"><a href="#">Developer</a></li>
    <li data-sub="#company" class="menu__item"><a href="#">Company</a></li>
  </ul>
  <div class="dropdown-holder">
    <div class="dropdown__arrow"></div>
    <div class="dropdown__bg">
      <div class="dropdown__bg-bottom"></div>
    </div>
    <div class="dropdown__content">
      <div id="product" class="dropdown-menu">
        <div class="dropdown-menu__content">
          <div class="top-section">
            <div class="col-2">
              <ul>
                <li><a href="">Payment</a></li>
                <li><a href="">Connect</a></li>
                <li><a href="">Atlas</a></li>
              </ul>
              <ul>
                <li><a href="">Subscription</a></li>
                <li><a href="">Relay</a></li>
              </ul>
            </div>
          </div>
          <div class="bottom-section">
            <ul>
              <li><a href="">Payment</a></li>
              <li><a href="">Connect</a></li>
              <li><a href="">Atlas</a></li>
              <li><a href="">Connect</a></li>
              <li><a href="">Atlas</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div id="developer" class="dropdown-menu">
        <div class="dropdown-menu__content">
          <div class="top-section">
            <ul>
              <li><a href="">Payment</a></li>
              <li><a href="">Connect</a></li>
              <li><a href="">Atlas</a></li>
              <li><a href="">Payment</a></li>
              <li><a href="">Connect</a></li>
              <li><a href="">Atlas</a></li>
            </ul>
          </div>
          <div class="bottom-section">
            <ul>
              <li><a href="">Payment</a></li>
              <li><a href="">Connect</a></li>
              <li><a href="">Atlas</a></li>
            </ul>
        ...

SCSS

*{
	box-sizing: border-box;
}
body{
	min-height: 100vh;
	background: linear-gradient(15deg, #25ddf5, #53f);
	font-family: karla;
	-webkit-font-smoothing: antialiased;
}

header{
	position: relative;
	padding: 20px 0 0;
}

.menu{
	list-style: none;
	margin: 0;
	padding-left: 0;
	display: flex;
	justify-content: center;
	
	a{
		padding: 20px 20px;
		display: block;
		text-decoration: none;
		color: white;
	}
}
.dropdown{
	&-holder{
		position: absolute;
		width: 100%;
		left: 0;
		top: 100%;
	}
	
	&__bg, &__arrow{
		position: absolute;
	}
	&__arrow{
		width: 0;
		height: 0;
		border-width: 10px;
		border-style: solid;
		border-color: transparent transparent white;
		top: -20px;
		opacity: 0;
		transition: .20s ease;
	}
	&__bg{
		width: 450px;
		height: 400px;
		background-color: white;
		opacity: 0;
		transition: .25s ease;
		border-radius: 5px;
		overflow: hidden;
		
		&-bottom{
			background-color: #efefef;
			position: absolute;
			width: 100%;
			left: 0;
			top: 300px;
			height: 700px;
			transition: .3s ease;
		}
	}
	
	&__content{
		overflow: hidden;
		position: absolute;
		transition: .25s ease;
		
		.top-section,.bottom-section{
			padding: 20px;
		}
	}
	
	&-menu{
		
		&__content{
			position: absolute;
			opacity: 0;
			transition: .25s ease;
			min-width:200px;
		}
		
		ul{
			list-style: none;
			padding-left: 0;
			margin: 0;
		}
		a{
			color: inherit;
			text-decoration: none;
		}
	}
	
	
}
.col-2{
	display: flex;
	ul{
		flex-grow: 1;
		
		a{
			display: block;
			padding: 20px;
			font-size: 24px;
		}
	}
}

JavaScript

var mn = $(".menu"),
	mnItem = mn.find(".menu__item");
	dr = $(".dropdown__content"),
	drBg = $(".dropdown__bg"),
	drBgBtm = $(".dropdown__bg-bottom"),
	drArr = $(".dropdown__arrow"),
	drMenu = $(".dropdown-menu__content");
	drCnt = $(".dropdown__content"),
	menuHovered = false;
	



mnItem.on("mouseenter", function(e){
	
	var item = $(this);
	var itemMeta = item[0].getBoundingClientRect();
	var sub = item.data('sub');
	var subCnt = $(sub).find(".dropdown-menu__content");
	var subMeta = subCnt[0].getBoundingClientRect();
	var subCntBtm = subCnt.find(".bottom-section");
	
	menuHovered = true;
	
	drBg.css({
		opacity: 1,
		left: itemMeta.left - ((subMeta.width / 2) - itemMeta.width/2),	
		width: subMeta.width,
		height: subMeta.height
	});
	drBgBtm.css({
		top: subCntBtm.position().top
	});
	drArr.css({
		opacity: 1,
		left: itemMeta.left + itemMeta.width/2 - 10
	});
	drCnt.css({
		opacity: 1,
		left: itemMeta.left - ((subMeta.width / 2) - itemMeta.width/2),	
		width: subMeta.width,
		height: subMeta.height
	});
	
	subCnt.css({
		opacity: 1,
	});
	
	$("header").addClass("dropdown-active");

}) ;


mnItem.on( 'mouseleave', function(e) {
	var item = $(this);
	var sub = item.data('sub');
	var subCnt = $(sub).find(".dropdown-menu__content");
	
	
    timeout = setTimeout(function() {
        if (!menuHovered) {
            drBg.css({
				opacity: 0
			});
			drArr.css({
				opacity: 0,
			});
			subCnt.css({
				opacity: 0
			});
			
			$("header").removeClass("dropdown-active");
			
			menuHovered = false;
			
			clearTimeout( timeout );
        }
    }, 100);
	
	
});