Esta pregunta ya tiene una respuesta aquí:

Tengo la siguiente estructura html desplegable y CSS, su padre tiene un desbordamiento oculto:

El problema que tengo es que cuando seleccionas el menú desplegable, el desbordamiento oculto lo corta, lo necesito para ignorar el desbordamiento.

He buscado cambiar la posición de los menús desplegables a fija, pero luego tendría que calcular su posición para cada menú desplegable, ¡cualquier otra sugerencia ayudaría!

.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;
}

<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>

Ver JSFiddle de trabajo -https: //jsfiddle.net/DarianSteyn/oq1w6eds/7

La estructura se construye utilizando un complemento que establece html y css. Puedo cambiar el CSS pero no la estructura HTML. Tampoco puedo cambiar la altura del padre, debe ser desplazable si hay múltiples menús desplegables.