Esta pergunta já tem uma resposta aqui:

Eu tenho a seguinte estrutura suspensa html e css, seu pai tem um estouro oculto -

O problema que estou tendo é que, quando você seleciona o menu suspenso, ele é cortado pelo estouro oculto, preciso que ele ignore o estour

Eu olhei para alterar a posição do menu suspenso para fixo, mas precisaria calcular sua posição para cada menu suspenso; qualquer outra sugestão ajudaria!

.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 trabalhando JSFiddle -https: //jsfiddle.net/DarianSteyn/oq1w6eds/7

A estrutura é criada usando um plugin que define o html e o css. Eu sou capaz de mudar o css, mas não a estrutura html. Também não posso alterar a altura do pai, ele precisa ser rolável se houver vários menus suspenso