JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu">
  <ul>
  <li><a href="">1</a>
  <div>
  <ul>
  <li><a href="">2</a></li>
  <li><a href="">3</a></li>
  </ul>
  </div>
  </li>
  </ul>
</div>

CSS

*{margin:0; padding:0;}
#menu {width:50%; margin:10px; background: #bd2323; text-align:center;}
#menu ul > li {display:block;border-top:1px solid #751313;}
#menu ul > li > a {display:block; padding:10px 0; color:#FFF; font-size:13px;}
#menu ul > li > a:hover {background:#921d1d;}
#menu ul > li > div > ul {display:none;}
#menu ul > li > div > ul > li {border-top:1px solid #000;}
#menu ul > li > div > ul > li a{font-size:11px; display:block;}
#menu ul > li > div > ul > li a:hover {background:#454545;}
#menu ul > li:hover > div > ul {display:block; background:#191919; margin:auto;}