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

CSS列重叠/溢出

1 个答案: