JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html>
  <body>
    <div style="width: 650px">
      <ul class="menu">
       <li><span>Selected Menu Item</span></li>
       <li><a href="#item">Another Item with Sub</a>
         <ul class="submenu">
           <li><a href="#sub">Submenu Item</a></li>
           <li><a href="#sub">Submenu Item</a></li>
         </ul>
       </li>
       <li><a href="#item">Another Item</a></li>
       <li><a href="#item">Another Item</a></li>
      </ul>
    </div>
  </body>
</html>

CSS

span, a {
    color: #fefefe;
    text-decoration: none;
}

.menu {
  display: table;
  width: 100%;
  background: #888;
}

.menu li {
  display: table-cell;
  position: relative;
  background: #444;
}

ul.submenu {
  position: absolute;
  width: 100%;
  background: #222;
}

ul.submenu li {
  display: block;
  background: transparent;
}