JSFiddle - React, Tailwind, and code Playground

HTML

<div class="navbar">
  <div class="dropdown">
    <button class="nav_button">M1</button>
  </div> 
  
  <div class="dropdown">
    <button class="nav_button">M2</button>
    <div class="dropdown-content">
      <button class="menu_sub_button">M2-1</button> 
      <button class="menu_sub_button">M2-2</button> 
    </div>
  </div>
	<div class="dropdown">
			<button class="nav_button">M3</button>
	</div> 
	<div class="dropdown">
		<button class="nav_button">M4</button>
	</div> 
</div> 
More text

CSS

.navbar {
		width:100%;
		overflow-x: auto;
		overflow-y: hidden;
		font-family: Arial, Helvetica, sans-serif;
		white-space: nowrap;
	}
	.navbar button {
		font-size: 12px;
		color: black;
		text-align: center;
		text-decoration: none;
	}
	.dropdown {
		overflow: auto;
		min-width: 180px;
		display: inline-block;
    vertical-align:top
  }
	.dropdown-content {
		 display: none;
		 position: absolute;
		 background-color: #f9f9f9;
		 min-width: 180px;
		 box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
		 z-index: 1;
	}
	.dropdown:hover .dropdown-content {
		 display: block;
	}
	.nav_button {
		 white-space: normal;
		 width: 175px;
		 height: 30px;
		 display: block;
		 text-align: left;
		 color: black;
		 border-style: none;
		 background-color: #757BD3;
	}
	.menu_sub_button {
		 white-space: normal;
		 width: 175px;
		 height: 25px;
		 display: block;
		 text-align: left;
		 color: black;
		 border-style: none;
		 background-color: #D8D8D8;
	}
	.menu_sub_button:hover {
		 background-color: #C3C3C3;
	}