CSS 列重叠/溢出答案

【问题标题】：CSS Column Overlap/OverflowCSS 列重叠/溢出
【发布时间】：2015-02-18 04:31:56
【问题描述】：

我有一个关于在 CSS 列中使用绝对定位的 div 的问题。基本上，我有一个菜单系统，它使用应用了计数 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，但它似乎在这里不起作用，所以我想知道这是否可能是一些奇怪的列行为？

提前致谢

【问题讨论】：

标签： css overflow z-index column-count

【解决方案1】：

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

【讨论】：