JSFiddle - React, Tailwind, and code Playground

HTML

<p>
The list below is scrollable. See the active menu is cut out due to overflow-auto.
</p>
<ul>
  <li>
    <p>Item</p>
    <div>
      <button>...</button>
      <span>
        Something here
      </span>
    </div>
  </li>
  <li>
    <p>Item</p>
    <div>
      <button>...</button>
      <span class="visible">
        [Menu Active]
      </span>
    </div>
  </li>
  <li>
    <p>Item</p>
    <div>
      <button>...</button>
      <span>
        Something here
      </span>
    </div>
  </li>
  <li>
    <p>Item</p>
    <div>
      <button>...</button>
      <span>
        Something here
      </span>
    </div>
  </li>
</ul>

CSS

ul {
  width: 200px;
  height: 100px;
  overflow: auto;
}

li {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

div {
  position: relative;
}

span {
  position: absolute;
  z-index: 10;
  top: 100%;
  margin-top: 4px;
  right: 0;
  background-color: red;
  display: none;
}

.visible {
  display: block;
}