JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="menu">
  <li><a href="#">Menu Item 1</a></li>
  <li><a href="#">Menu Item 2</a>
      <ul class="submenu">
          <li><a href="#">Submenu Item 1</a></li>
          <li><a href="#">Submenu Item 2</a></li>
      </ul>
  </li>
  <li><a href="#">Menu Item 3</a></li>
  <li><a href="#">Menu Item 4</a></li>
</ul>

CSS

ul#menu a {
    text-decoration: none;
    display: block;
    background: #EEE;
    border: 1px solid #CCC;
    padding: 1em;
}
ul#menu {
    display: table;
    width: 100%;
}
ul#menu > li {
    display: table-cell;
}

ul.submenu {
    position: absolute;
    display: block;
}
ul.submenu > li {
    display: block;
}