JSFiddle - React, Tailwind, and code Playground

HTML

<ul id='nav'>
        <li id='button-one'><a>Sub menu title</a>
           <ul>
              <li>
                 <a>Link</a>
              </li>
              <li><a>Submenu</a>
                 <ul>
                    <li><a href=''>Link 1</a></li>
                  </ul>
              </li>
           </ul>
        </li>
     </ul>

CSS

html, body {
     height: 100%;
     padding: 0;
     margin: 0;
  }

  #nav {
     position: absolute;
     display: fixed;
     top: 50%;
     right: 0;
     width: 60px;
  }

  ul {
     padding:0;
     margin: 0;
     list-style: none;
     width: 600px;
     background: grey;
     table-layout: fixed;
     position: absolute;
     right: 0;
  }

  #nav > li > ul {
     margin-right: 60px;
  }

  li {
     display: table;
     height: 60px;
     background: yellow;
     width: 100%;
  }

  a {
     display: table-row;
     display: none;
     width: 100%;
     height: 60px;
     line-height: 60px;
     top: 50%;
     text-align: right;
  }

  li ul {
     display: none;
  }

  li:hover a {
     display: table-row;
  }

  li a:hover + ul {
     display: block !important;
  }

  #button-one {
     display: block;
     width: 60px;
     height: 60px;
     background: tomato;
  }

  #nav > li > a {
     text-indent: -9999em;
  }