JSFiddle - React, Tailwind, and code Playground

by DarianSteyn

HTML

<div class="overflow-container">
  <div class="dropdown-container">
    Select an option
     <ul class="dropdown1">
      <li class="dropdown-item">Option 1</li>
      <li class="dropdown-item">Option 2</li>
      <li class="dropdown-item">Option 3</li>
    </ul>
  </div>
  
  <div class="dropdown-container">
  Select an option
     <ul class="dropdown1">
      <li class="dropdown-item">Option 1</li>
      <li class="dropdown-item">Option 2</li>
      <li class="dropdown-item">Option 3</li>
    </ul>
  </div>
  
    <div class="dropdown-container">
    Select an option
     <ul class="dropdown1">
      <li class="dropdown-item">Option 1</li>
      <li class="dropdown-item">Option 2</li>
      <li class="dropdown-item">Option 3</li>
    </ul>
  </div>
  
</div>

CSS

.overflow-container{
    display: block;
    height: 60px !important;
    overflow: auto;
    overflow-x: hidden;
    float: left;
    background-color: #eaeaea;
    padding: 20px;
}

.dropdown-container:hover .dropdown1{
  display: block;
}

.dropdown1{
  display: none;
}