JSFiddle - React, Tailwind, and code Playground

by meules

HTML

<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 title="Apple Park" href="#" class="subitemLink">Apple Park</a></li>
    ...

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 ul li{list-style-type:none;}
.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;
}
.cats .item.sub:hover .subnav {
  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;
}