CSS 列 Overlap/Overflow

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 到 show/hide 下拉列表。 column-count 似乎不适用于 Whosebug 的代码片段，所以这里有一个 CodePen：http://codepen.io/phantomesse/pen/OPvyGY

CSS 列 Overlap/Overflow

CSS Column Overlap/Overflow

css

z-index

overflow

column-count