JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="nav">
  <li>
    <a href="#">link 1</a>
    <div class="nav__body">
      111
    </div>
  </li>
  <li>
    <a href="#">link 2</a>
    <div class="nav__body">
      222
    </div>
  </li>
  <li>
    <a href="#">link 3</a>
    <div class="nav__body">
      333
    </div>
  </li>
  <li>
    <a href="#">link 4</a>
    <div class="nav__body">
      444
    </div>
  </li>
</ul>

SCSS

.nav {
  width: 200px;
  border: 1px solid #000;
  position: relative;
  list-style: none;
  
  &__body {
    position: absolute;
    top: -1px;
    left: 100%;
    border: 1px solid #000;
    height: 100%;
    visibility: hidden;
    opacity: 0;
    transition: all .2s ease-out;    
  }
  
  li:hover {
    .nav__body {
      visibility: visible;
      opacity: 1;
    }
  }
}