JSFiddle - React, Tailwind, and code Playground

by derekstory

HTML

<div id="menuspacer">  

<ul class="drop">

<li><a href="/services" class="active">Services</a>

        <ul>
            <li><a href="/services/1">1</a></li>
            <li><a href="/services/2">2</a></li>    
            <li><a href="/services/3">3</a></li>
            <li><a href="/services/4">4</a></li>


        </ul>
</li>

<li><a href="/products" class="active">Products</a>  

    <ul>
            <li><a href="/products/1">1</a></li>
            <li><a href="/products/2">2</a></li>
            <li><a href="/products/3">3</a></li>
            <li><a href="/products/4">4</a></li>

        </ul>

</li>

<li><a href="/contact" class="active">Contact</a></li>      

</ul>

CSS

#menu { margin: 0 auto; padding:0px; text-align:center; vertical-align: top; } 

#menuspacer {position: relative; display:inline-block; margin:0 auto; vertical-align: top; }

ul.drop a {color: #fff; font: arial, helvetica, sans-serif; font-size: 16px; text-decoration: none; display:block;}
ul.drop, ul.drop li, ul.drop ul { list-style: none; margin: 0; padding: 0; border: 0px solid #fff; background: #555; color: #fff;}
ul.drop { position: relative; z-index: 597; }
ul.drop li { text-align:left; position:relative;  padding: 8px 20px; float:left;}
ul.drop li.hover, ul.drop li:hover { position: relative; z-index: 599; cursor: default; background: #1e7c9a;}
ul.drop ul { visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; width: 150px; background: #555; border: 2px solid #000;  }
ul.drop ul li { float: none; }
ul.drop ul ul { top: -2px; left: 100%; }
ul.drop li:hover > ul { visibility: visible }