JSFiddle - React, Tailwind, and code Playground

HTML

<div id='cssmenu'>
  <ul>
     <li><a href="#">Product Repository </a>
    <ul>
        <li><a href="#">Insert</a></li>
        <li><a href="#">Search & Edit</a></li>
        <li><a href="#">File Upload</a></li>
    </ul>
</li>
<li><a href="#">Inventory Inspection</a>
    <ul>
        <li><a href="#">Insert</a></li>
        <li><a href="#">Search & Edit</a></li>
        <li><a href="#">Reprint</a></li>
        <li><a href="#">Inventory Report</a></li>
    </ul>
</li>
<li><a href="#">Reports</a>
    <ul>
        <li><a href="#">Insert</a></li>
        <li><a href="#">Search & Edit</a></li>
    </ul>
</li>   
  </ul>
</div>

CSS

#cssmenu {padding: 0; margin: 0; border: 0;}
#cssmenu ul, #cssmenu li {list-style: none; margin: 0; padding: 0;}
#cssmenu ul {position: relative; z-index: 597; }
#cssmenu ul li { float: left; min-height: 1px; vertical-align: middle; border:solid 1px blue; width:150px;}
#cssmenu ul li.hover,
#cssmenu ul li:hover {position: relative; z-index: 599; cursor: default; background-color:yellow;}
#cssmenu ul ul {visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; width: 150px;}
#cssmenu ul ul li {float: none; margin-left:-1px; width:150px; border:solid 1px red;}
#cssmenu ul li:hover > ul { visibility: visible;}
#cssmenu ul ul {bottom: 0; left: 0;}
#cssmenu ul ul {margin-top: 0; }
#cssmenu ul ul li {font-weight: normal;}
#cssmenu a { display: block; /*line-height: 1em;*/ text-decoration: none; }