CSS 列重叠/溢出

Question

我有一个关于在 CSS 列中使用绝对定位的 div 的问题。 基本上，我有一个菜单系统，它使用应用了 count-count 2 的无组织列表。在悬停其中一个 li 元素时，我希望出现一个绝对定位的 div - 它确实如此。但它似乎被第二列重叠，使其无法使用。请在此处查看屏幕截图:http://i.stack.imgur.com/PYuUE.png

<ul class="nav">
  <li>
    <a href="#">Internal Storage Solutions</a>
    <div class="drop">
      <ul>
        <li>
          <a href="#">Some Link</a>
        </li>
      </ul>
    </div>
  </li>
</ul>

您可以在开发人员工具中看到突出显示的淡蓝色元素是我需要让其可见的元素。我试过 z-index，但它在这里似乎不起作用，所以我想知道这是否是一些奇怪的列行为？

提前致谢

Answer 1

下拉菜单不显示的原因是它隐藏在包含 <li> 的内部.我想出了一个解决方案，我移动了下拉菜单 <div>到关联<li>之后并使用 JavaScript 显示/隐藏下拉菜单。 column-count似乎不适用于 StackOverflow 的代码片段，所以这里有一个 CodePen:http://codepen.io/phantomesse/pen/OPvyGY