JSFiddle - React, Tailwind, and code Playground

For SO question# 38206372

by Louys Patrice Bessette

HTML

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<div class="cats">
  <ul>

    <li class="item sub">
      <a title="Baby" href="http://ministry.webshopapp.com/baby/" class="itemLink">Baby</a>
      <div class="subnav">
        <ul class="flex-wrap">
          <li class="subitem title"><a title="Borstvoeding" href="#" class="title">something</a></li>
          <li class="subitem"><a title="ATTITUDE" href="#" class="subitemLink">ATTITUDE</a></li>
          <li class="subitem"><a title="Apple Park" href="#" class="subitemLink">Apple Park</a></li>
<li class="subitem title"><a title="Borstvoeding" href="#" class="title">something</a></li>
          <li class="subitem"><a title="ATTITUDE" href="#" class="subitemLink">ATTITUDE</a></li>
          <li class="subitem"><a title="Apple Park" href="#" class="subitemLink">Apple Park</a></li>
          <li class="subitem title"><a title="Borstvoeding" href="#" class="title">something</a></li>
          <li class="subitem"><a title="ATTITUDE" href="#" class="subitemLink">ATTITUDE</a></li>
          <li class="subitem"><a title="Apple Park" href="#" class="subitemLink">Apple Park</a></li>
          <li class="subitem title"><a title="Borstvoeding" href="#" class="title">something</a></li>
          <li class="subitem"><a title="ATTITUDE" href="#" class="subitemLink">ATTITUDE</a></li>
          <li class="subitem"><a title="Apple Park" href="#" class="subitemLink">Apple Park</a></li>
          <li class="subitem title"><a title="Borstvoeding" href="#" class="title">something</a></li>
          <li class="subitem"><a title="ATTITUDE" href="#" class="subitemLink">ATTITUDE</a></li>
          <li class="subitem"><a title="Apple Park" href="#" class="subitemLink">Apple Park</a></li>
          <li class="subitem title"><a title="Borstvoeding" href="#" class="title">something</a></li>
          <li class="subitem"><a title="ATTITUDE" href="#" class="subitemLink">ATTITUDE</a></li>
          <li class="subitem"><a...

CSS

.cats {
  display: table;
  float: right;
  text-align: center;
  width: 82%;
}
.cats > ul {
  display: table-row;
}
.cats .item {
  display: table-cell;
  line-height: 76px;
}
.item {
  margin-bottom: 30px;
  position: relative;
}

.cats .subnav {
  background: #fff none repeat scroll 0 0;
  border: 1px solid #eee;
  padding: 30px;
  position: absolute;
  text-align: left;
  z-index: 99;
  /*display:none;*/
}
/*.item.sub:hover {
  display: block;
}*/
.flex-wrap {
  background: #fff none repeat scroll 0 0;
  display: flex;
  flex-flow: column wrap;
  height: 200px;
}
.subnav .subitem {
  background: #fff none repeat scroll 0 0;
  line-height: 36px;
}
.subitem{
	margin-left:20px;
}

JavaScript

$(document).ready(function() {
	
	// Only for this Fiddle use -- Set to false to hide width measurements...
	var enableSimulatedConsoleLog=true;
	
	// Find the largest li for each flex-wrap
    $('.flex-wrap').each(function(){
        var longestWidth = 0;
		$(this).children().each(function(){
			if( $(this).width() > longestWidth){
				longestWidth = $(this).width();
				
				if(enableSimulatedConsoleLog){
					$("#console").append("longestWidth-Iteration: "+longestWidth+"<br>");
				}
			}
		});
		
		// set all li to this width
		$(this).children().each(function(){
			$(this).width(longestWidth);
		});
		
		if(enableSimulatedConsoleLog){
			$("#console").append("longestWidthFinal: "+longestWidth+"<br>");
		}
	});
	
	
	// Find the most right li offset
	
	$('.flex-wrap').each(function() {
        var mostRight=0;
		$(this).children().each(function(){
			mostRight = $(this).offset().left - $(this).parent().offset().left + $(this).outerWidth(true);
			
			if(enableSimulatedConsoleLog){
				$("#console").append("<br><br>mostRight: "+mostRight
					+"<br>$(this).offset().left: "+$(this).offset().left
					+"<br>$(this).parent().offset().left: "+$(this).parent().offset().left
					+"<br>$(this).outerWidth(true): "+$(this).outerWidth(true)
				
				);
			}
		});
		// Adjust width
        $(".subnav").width(mostRight);
		
		
    
    });
	
	
	// Now you can hide the subnavs
	$(".subnav").each(function(){
		$(this).css({"display":"none"});
	});
	
	// Hover effect
	$(".item").on("mouseover", function(){
		$(this).find(".subnav").css({"display":"block"});
	});
	$(".item").on("mouseout", function(){
		$(this).find(".subnav").css({"display":"none"});
	});	
	
	
});