JSFiddle - React, Tailwind, and code Playground
by Tan
HTML
<div class="nav-contain">
<div class="nav">
<div class="l1"><a href="#">LINK</a>
<div class="l2">
<a href="#">LINK</a>
<a href="#">LONG LINK</a>
<a href="#">LINK</a>
</div>
</div>
<div class="l1"><a href="#">LONG LINK</a>
<div class="l2">
<a href="#">LINK</a>
<a href="#">LONGER LINK BUTTON</a>
<a href="#">LINK</a>
</div>
</div>
<div class="l1"><a href="#">LINK</a>
<div class="l2">
<a href="#">LINK</a>
<a href="#">LONG LINK</a>
<a href="#">LINK</a>
</div>
</div>
<div class="l1"><a href="#">LONG LINK</a>
<div class="l2">
<a href="#">LINK</a>
<a href="#">LONG LINK</a>
<a href="#">LINK</a>
</div>
</div>
</div></div>CSS
body {font-family:arial;}
.nav-contain {width:100%;background-color:#cccccc;height:30px;}
.nav {max-width:700px;margin:auto;}
.l1 {line-height:30px;height:30px;background-color:#cccccc;position:relative;float:left;overflow:visible;white-space: nowrap;}
.l1 a {display:block;color:#111111;text-decoration:none;padding:0 10px;}
.l1 a:hover {background-color:#dddddd;}
.l2 {background-color:#eeeeee;display:none;position:absolute;top:30px;left:0;overflow:visible;white-space: nowrap;}
.l2 a {display:block;color:#111111;text-decoration:none;padding:0 10px;}
.l2 a:hover {background-color:#dddddd;}
.l1:hover .l2 {display:block;white-space: nowrap;}