忽略父元素的溢出

Question

我具有以下下拉html结构和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;
}

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

查看正在运行的JSFiddle-http://php.net/manual/en/function.array-column.php

该结构是使用可设置html和css的插件构建的。我能够更改CSS，但不能更改html结构。我也无法更改父级的高度，如果有多个下拉菜单，则需要将其滚动。

Answer 1

使用position:absolute并使用边距或平移来调整位置。然后不要将position:relative添加到父元素，以使其被溢出忽略。

.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;
  position:absolute;
  margin-left:100px;
  margin-top:-10px;
}

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