JSFiddle - React, Tailwind, and code Playground
by Mark Syred
HTML
<header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">Sub Link 1</a></li>
<li><a href="#">Sub Link 2</a></li>
<li><a href="#">Sub Link 3</a></li>
<li><a href="#">Sub Link 4</a></li>
<li><a href="#">Sub Link 5</a></li>
<li><a href="#">Sub Link 6</a></li>
<li><a href="#">Sub Link 7</a></li>
</ul>
</li>
<li><a href="#">Top Link</a>
<ul>
<li><a href="#">Sub Link 1</a></li>
<li><a href="#">Sub Link 2</a></li>
<li><a href="#">Sub Link 3</a></li>
<li><a href="#">Sub Link 4</a></li>
<li><a href="#">Sub Link 5</a></li>
<li><a href="#">Sub Link 6</a></li>
<li><a href="#">Sub Link 7</a></li>
</ul>
</li>
<li><a href="#">News</a>
<ul>
<li><a href="#">News Item 1</a></li>
<li><a href="#">News Item 2</a></li>
<li><a href="#">News Item 3</a></li>
<li><a href="#">News Item 4</a></li>
<li><a href="#">News Item 5</a></li>
<li><a href="#">News Item 6</a></li>
<li><a href="#">News Item 7</a></li>
<li><a href="#">News Item 8</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>CSS
header{border-bottom:1px solid #c6c8c9;height:35px;width:100%}
header nav{margin:0;position:absolute;right:0;top:0}
header nav ul{list-style:none;margin:0;text-transform:lowercase;width:auto;position:relative}
header nav li{float:left;margin:0}
header nav li a{font:18px/1 'Arial';height:23px;display:block;padding:7px 10px 14px}
header nav li:first-child a{padding:7px 10px 14px 0}
header nav li:last-child a{padding:7px 0 14px 10px}
header nav li:nth-child(2):hover,header nav li:nth-child(3):hover,header nav li:nth-child(4):hover{margin:-1px -1px 0 -1px;border:1px solid #c6c8c9;border-bottom:1px solid white;border-radius:5px 5px 0 0}
header nav a:link,header nav a:visited,header nav li:hover,header nav li:active{text-decoration:none}
header nav li ul{background:#fff;position:absolute;top:44px;width:504px;-webkit-transition:max-height 0s;-moz-transition:max-height 0s;-ms-transition:max-height 0s;-o-transition:max-height 0s;transition: max-height 0s;overflow:hidden;max-height:0}
header nav li ul li{float:none}
header nav li:hover ul{max-height:155px;border:1px solid #c6c8c9;border-width:0 1px 1px;padding:4px 0 10px;-webkit-transition: max-height 0.6s;-moz-transition: max-height 0.6s;-ms-transition: max-height 0.6s;-o-transition: max-height 0.6s;transition: max-height 0.6s;height:140px;column-count:2;-moz-column-count:2;-ms-column-count:2;-o-column-count:2;-webkit-column-count:2;column-gap:0;-moz-column-gap:0;-ms-column-gap:0;-o-column-gap:0;-webkit-column-gap:0}
header nav li ul{right:0}
header nav li ul li:hover{border:none !important;margin:0 !important}
header nav li ul li a{font:16px/35px 'Arial';opacity:0;height:35px;padding:0 0 0 5px !important;left:0;position:static;border-left:6px solid white}
header nav li:hover ul li a{opacity:1;transition:opacity 0.6s}
header nav li ul li:nth-child(1) a:hover,header nav li ul li:nth-child(8) a:hover{border-left:6px solid #c4004b}
header nav li ul li:nth-child(2) a:hover{border-left:6px solid #a7b600}
header nav li ul...