Question

我知道，一个模糊的标题，但很难用一句话描述我想要的东西。

我的问题如下，我有一个模板，其中有几个由jQuery激活的下拉菜单。下拉列表在第一级列表中显示为第二级导航项，如下所示：

<ul class="tools">
  <li class="dropdown">
    <a href="#">Tools</a>
    <ul class="submenu">
      <li><a href="/">Option 1</a></li>
      <li><a href="/">Option 2</a></li>
      <li><a href="/">Option 3</a></li>
    </ul>
  </li>
  <li><a href="/">More</a></li>
</ul>

默认情况下隐藏子菜单，可以通过单击它所属的列表项来显示（在本例中为“工具”）。子菜单位于绝对位置，因此当它显示时它始终位于单击链接的下方。这一切都很好。

问题是所有这些都包含在一个有溢出的div中：hidden。当子菜单太靠近此div的右侧，并且列表项太长时，列表将位于包装器的右边界下，使其部分不可见。溢出：auto为包装器提供滚动条，这是不需要的。溢出：可见解决问题，但使包装没有高度，使背景颜色和边框不可见，这是它的功能的一部分，所以这也无济于事。

为了不必引用大量代码，可以在 http://www.pkr.nl/template/forumdisplay.html

上看到一个实例。

有没有人知道一个解决方案会让菜单显示在包装器外面，还是让它们以合适的方式与它对齐？

Answer 1

你有没有理由离开#container .column？

如果您移除了浮动广告，然后从overflow:hidden移除了#container，则会显示您的菜单。

CSS下拉菜单定位在包含隐藏溢出的包装内

1 个答案: