JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<body>
<div class="wrapper">
  <div class="submenu_container">
    <div class="menu_container">
    <div class="menu_list" align="left">
      Menu 1 Menu2 Menu 3
    </div>
    </div>
       <div class="submenu">
      sub
    </div>
  </div>
</div>
</body>

CSS

.wrapper {
    margin-top: 50px;
  }

  .menu_container {
    color: #333;
    text-align: center;
    padding: 1em;
    background: #607D8B;
    width: 20%;
    height: 30px;
    overflow: hidden;
  }
 
.submenu_container {
    position: relative;
}
  
.submenu {
    background: #E0E0E0;
    height: 100px;
    width: 50px;
    position: absolute;
    left: 20px;
    top: 40px;
  }
  
  .menu_list {
  	width: 300px;
  }