JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<body>
<div class="wrapper">
  <div class="menu_container">
    <div class="menu_list" align="left">
      Menu 1 Menu2 Menu 3
    </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: auto;
    overflow-x:hidden;
  }
  
  
.submenu {
    background: #E0E0E0;
    height: 100px;
    width: 50px;
    display: none;
  }
.menu_container:hover .submenu {
    display: block;
}
  
  .menu_list {
  	width: 300px;
  }