javascript - position absolute 不显示所有内容，显示在其他组件后面

Question

我正在处理自定义下拉菜单，但我对绝对位置有疑问，不显示菜单的全部内容，只显示一个部分，其余部分在组件后面。

.drop {
  position: relative;
  width: 100%;
  z-index: 11;
}
.drop-down-menu {
  min-width: 160px;
  width: 100%;
  background-color: #ffffff;
  overflow-y: auto;
  list-style: none;
  display: none;
  position: absolute;
}
.drop-down-menu.show {
  display: block;
  height: auto;
  max-height: 136px;
  background-clip: padding-box;
  z-index: 10;
}

尝试用z-index更正错误但没有得到结果drop-down-menu.show 是用 javascript 添加的，而不是用 Hover 添加的这是 HTML 代码

<nav class="drop">
        <select name="drop-down">
          <option value="">Select</option>
          <option value="">Option 1</option>
          <option value="">Option 2</option>
        </select>
      </nav>

我已经在这个地址运行了应用程序: https://showcase-douglascamposh.c9.io/是:下拉列表我不知道是什么问题，出了什么问题？

Answer 1

使用 .column 类从父 div 中移除 overflow:hidden

<div class="column xs-12">
  ...
  <ul class="drop-down-menu">
    <li data-option="">Select</li>
    <li data-option="">Option 1</li>
    <li data-option="">Option 2</li>
    <li data-option="">Option 3</li>
    <li data-option="">Option 4</li>
  </ul>
</div>