JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="menu">
  <li><a href="#">ONE</a>
    <div class="menu fake"></div>
    <ul>
      <li><a href="#">SUB_ONE</a></li>
      <li><a href="#">SUB_TWO</a></li>
      <li><a href="#">SUB_THREE</a></li>
    </ul>
        
  </li>
  <li><a href="#">TWO</a></li>
  <li><a href="#">THREE</a></li>
</ul>

CSS

.menu {
    /* Gradient: */
    background: #444;
    background: -webkit-gradient(linear, left top, left bottom, from(#999), to(#777));
    background: -moz-linear-gradient(top,  #999,  #777);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#999', endColorstr='#777');
    height: 25px;
    /* Box-Shadow: */
    -moz-box-shadow: 1px 3px 3px #888;
    -webkit-box-shadow: 1px 3px 3px #888;
    box-shadow: 1px 2px 3px #888;
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
    position: relative;
    z-index: 20;
}

ul.menu, ul.menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.menu a {
    display: block;
    text-decoration: none;
    color: #000;
    line-height: 22px;
    padding-right: 15px;
    padding-left: 15px;
}

ul.menu li {
    padding:0;
    margin:0;
    float:left;
}

ul.menu ul {
    margin-left: 15px;
    padding: 0;
    position: absolute;
    display: none;
    background-color: #CCC;
    z-index: 19;
    top:25px;
    left:0px
}

ul.menu li:hover ul  {
    display: block;
}

ul.menu ul li {
    float: none;
}


.fake {
    height:1px;
    width:100%;
    position:absolute;
    margin-top:3px;
    left:0px;
    z-index:35;

}