JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <table border="1">
  <tbody>
  <tr>
    <td>
      <div class="menu-container">
        <ul> col1
          <li>menu 1</li>
          <li>menu 2</li>
          <li>menu 3</li>
          <li>menu 4</li>
          <li>menu 5</li>
          <li>menu 6</li>
          <li>menu 7</li>
          <li>menu 8</li>
        </ul>
      </div>    
    </td>
    <td>
      col 1
    </td>
    <td>
      col 2
    </td>
    <td>
      col 3
    </td>
    <td>
      col 4
    </td>
  </tr>
  <tr>
    <td>
      col 1
    </td>
    <td>
      col 1
    </td>
    <td>
      col 2
    </td>
    <td>
      col 3
    </td>
    <td>
      col 4
    </td>
  </tr>

  <tr>
    <td>
      col 1
    </td>
    <td>
      col 1
    </td>
    <td>
      col 2
    </td>
    <td>
      col 3
    </td>
    <td>
      col 4
    </td>
  </tr>
  
  <tr>
    <td>
      col 1
    </td>
    <td>
      col 1
    </td>
    <td>
      col 2
    </td>
    <td>
      col 3
    </td>
    <td>
      col 4
    </td>
  </tr>
  
  </tbody>
  </table>
</div>

CSS

.container {
  max-height: 70px;
  overflow-y: scroll;
}
table {
  width: 100%;
}
.menu-container {
  position: relative;
}
.menu-container ul {
  padding: 0px;
  margin: 0px;
  border: 1px solid black;
  background-color: gray;
}
.menu-container ul:hover {
  position: absolute;
  margin-top: -10px;
  width: 100%;
}
.menu-container ul li {
  display: none;
  list-style-image: none;
	margin: 0px;
	padding: 0px;
  width: 100%;
}
.menu-container ul:hover li {
  color: red;
  display: block;
  margin-bottom: 0px;
}