JSFiddle - React, Tailwind, and code Playground

HTML

<div class="left">
  <ul>
    <li><a href="">1</a></li>
    <li><a href="">2</a></li>
    <li>
      <a href="">3
        <ul>
          <li><a href="">3_1</a></li>
          <li><a href="">3_2</a></li>
          <li><a href="">3_3</a></li>
        </ul>
      </a></li>
    <li><a href="">4</a></li>
    <li><a href="">5</a></li>
  </ul>
</div>
<div class="right"><div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque architecto atque magni repellat, quaerat quis omnis sit dolorum! Quod nihil quos placeat voluptas distinctio numquam magnam eaque aspernatur dolorum temporibus!</div>
<div>Iure, veritatis dolore porro, suscipit, quidem tenetur eveniet fuga quis illum doloribus neque ea molestias similique quia! Veritatis neque fuga quos assumenda atque architecto, in quaerat, commodi, optio dolores qui?</div>
<div>Porro error, asperiores perferendis pariatur mollitia numquam, debitis quasi. Facere officia iure nihil officiis ab odio illum quasi doloremque non, itaque perspiciatis eligendi quidem corporis aperiam, hic, voluptates ipsam temporibus.</div>
<div>Labore libero repellat repudiandae consequuntur ex dolore iusto numquam eos ad quos ea quisquam, itaque soluta. Sed, ducimus, dicta! Exercitationem voluptas nostrum autem, soluta odio saepe officia rem quam tenetur?</div>
<div>Repellendus explicabo consectetur quis voluptates beatae, placeat facilis rem cupiditate possimus assumenda eligendi atque odit dolor earum temporibus deserunt! Eos veritatis vel minima debitis necessitatibus in cupiditate suscipit amet, assumenda.</div>
<div>A sint beatae sit nisi maiores quas optio, dolorem vitae incidunt qui cum ipsam quia, delectus, minus quis tempore, illo ex assumenda ea omnis laborum aliquam! Quod quo, at doloribus.</div>
<div>Obcaecati doloribus ipsum nostrum, at ab temporibus dicta voluptas, libero magni reprehenderit labore est veritatis cupiditate, saepe, aliquid beatae cumque deserunt dolorem laborum commodi. Eaque laborum error maiores velit...

CSS

body {
  color: #fff;
}
.left {
  background: orange;
  width: 25%;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
}
.left li {
  width: 100%;
  padding: 10px;
  position: relative;
}
.left li:hover {
  background-color: #fff;
}
.left li:hover ul {
  display: block;
}
.left li ul {
  position: absolute;
  right: 0;
  display: none;
  width: 150px;
  background-color: #ccc;
}
.right {
  background: green;
  margin-left: 25%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}