JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <h4>
 A
  </h4>

  <ul>
    <li>
      <div class="menu">
        Menu goes here
      </div>


      1
    </li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
  </ul>

 


</div>




<div class="wrapper2">

  <h4>
  B
  </h4>

  <ul>
    <li>
      <div class="menu">
        Menu goes here
      </div>


      1
    </li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
  </ul>

  </ul>

</div>


</div>

CSS

.wrapper {
  position: relative;
  width: 200px;
  height: 300px;
  background: red;
  overflow-y: auto;
  overflow-x: auto;
}

.menu {
  position: absolute;
  background: green;
  width: 150px;
  height: 70px;
  right: -20px;
  z-index: 1;
}

.wrapper ul {
  list-style: none outside;
  padding-left: 0;
}

.wrapper li {
  background: blue;
  width: 100%;
  height: 50px;
  color: #fff;
  margin-bottom: 5px;
  position: relative;
}

.wrapper2 {
  position: relative;
  width: 200px;
  height: 300px;
  background: red;
}

.wrapper2 ul {
  list-style: none outside;
  padding-left: 0;
}

.wrapper2 li {
  background: blue;
  width: 100%;
  height: 50px;
  color: #fff;
  margin-bottom: 5px;
  position:relative;
}