JSFiddle - React, Tailwind, and code Playground

HTML

<ul id='nav'>
  <li class='button'><a>Sub menu title 1</a>
    <ul>
      <li><a>Link</a></li>
      <li><a>Submenu</a>
        <ul>
          <li><a href=''>Link 1</a></li>
          <li><a href=''>Link 2</a></li>
          <li><a href=''>Link 3</a></li>
          <li><a href=''>Link 4</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li class='button'><a>Sub menu title 2</a>
    <ul>
      <li><a>Link</a></li>
      <li><a>Submenu</a>
        <ul>
          <li><a href=''>Link 1</a></li>
          <li><a href=''>Link 2</a></li>
          <li><a href=''>Link 3</a></li>
          <li><a href=''>Link 4</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li class='button'><a>Sub menu title 3</a>
    <ul>
      <li><a>Link</a></li>
      <li><a>Submenu</a>
        <ul>
          <li><a href=''>Link 1</a></li>
          <li><a href=''>Link 2</a></li>
          <li><a href=''>Link 3</a></li>
          <li><a href=''>Link 4</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

CSS

html, body {
	height: 100%;
	padding: 0;
	margin: 0;
}
ul {
	padding:0;
	margin: 0;
	list-style: none;
}
#nav {
	position:fixed;
	top: 50%;
	left: 0;
	width: 120px;
}
#nav ul {
	width: 200px;
	background: grey;
	position:absolute;
	right:-9999em;
}
#nav a {
	display:block;
	padding:5px 10px;
}
#nav ul li {
	position:relative;
}
#nav li:hover > ul {
	right:-200px;
	top:0;
}
#nav li:hover > a {
	background:yellow;
	cursor:pointer
}
.button a {
	display: block;
	padding:5px 10px;
	background: tomato;
}