JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="topnav" class="sf-menu">
    <li id="menu-item-190"><a href="#">Menu Item</a>
        <ul class="sub-menu">
            <li id="menu-item-297"><a href="#">Sub Menu Item 1</a></li>
            <li id="menu-item-315"><a href="#">b dfgbfgbdbg bgfdb</a></li>
            <li id="menu-item-344"><a href="#">bfgf fgdgdf bgfb</a></li>
            <li id="menu-item-436"><a href="#">Hfgbfggfdfb</a></li>
            <li id="menu-item-561"><a href="#">dbgd</a></li>
            <li id="menu-item-564"><a href="#">bggf fbggf fgbdfbdf</a></li>
            <li id="menu-item-571"><a href="#">fgb fdbg bfgbdf</a></li>
            <li id="menu-item-574"><a href="#">kuyvkuycs ukygo guyh oiuhyoi uih sds</a></li>
            <li id="menu-item-577"><a href="#">sdcdsd dsdscsdsdc</a></li>
        </ul>
    </li>
</ul>

CSS

.sf-menu{
    list-style: none;
}
.sf-menu li {
  position: relative;
  float: left;
  border:1px solid grey;
  padding: 5px;
}
.sf-menu ul {
  list-style: none;
  position: absolute;
  top: -999em;
  padding: 0px;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
  top: 100%;
}