绝对位置不显示所有内容，显示在其他组件后面

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

使用overflow:hidden类

从父div中删除.column

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

你有

.row .column {
    /* ... */
    overflow: hidden;
    /* ... */
}

在您的jala-ui-framework.css文件中，因此.column类中超出高度的任何内容都将被隐藏。删除