JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="dropit">
    <li><a href="#">Thing 1</a></li>
    <li><a href="#">Thing 2</a></li>
    <li><a href="#">Thing 3</a>
      <ul>
        <li><a href="#">Sub-thing 1</a></li>
        <li><a href="#">Sub-thing 2</a>
           <ul class='sub-menu'>
            <li><a href="#">Sub-sub-thing 1</a></li>
            <li><a href="#">Sub-sub-thing 2</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>

CSS

ul.dropit, ul.dropit li, ul.dropit li *
{
  margin: 0;
  padding: 0;
  position: relative;
  list-style: none;
  border: none;
  outline: none;
}

ul.dropit li
{
  display: inline-block;
  vertical-align: middle;
  border-bottom: lightgray;
  padding: 15px;
}
ul.dropit li a
{
  white-space: nowrap;
}

ul.dropit li:nth-child(odd)
{
  background: lightblue;
}

ul.dropit li:nth-child(even)
{
  background: lightgray;
}

ul.dropit ul
{
  position: absolute;
  z-index: 1000;
  top: 100%;
  left: 0;
}

ul.dropit ul.sub-menu
{
  top: 0;
  left: 100%;  
}


ul.dropit li ul
{
  display: none;
}

JavaScript

$(document).ready(function(e) {
    $('ul.dropit li').on('mouseover', function(event) {
        $target = $(event.currentTarget);
        $sub = $target.children('ul').first();
        $sub.slideToggle();
    }).on('mouseout', function(event) {
        $target = $(event.currentTarget);
        $target.children('ul').first().slideToggle();
    });
});