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

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纠正错误，但没有得到结果-下拉菜单显示是用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

你有

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

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

Answer 2

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

​

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

​