如何在Twitter Bootstrap下拉菜单中设置溢出并带有子菜单？

Question

我在使用Twitter Bootstrap下拉菜单组件的子菜单时遇到了CSS溢出属性的问题。

当将max-height和overflow设置为auto时，滚动条会像应该出现在列表中，但子菜单会进入水平滚动条下面的下拉列表中，这不是我需要的。

以下是此问题的示例。

http://jsfiddle.net/ftMhv/1/

我尝试更改overflow-x和overflow-y的值，但它们都没有很好地解决问题。

- nextstopsun

---

你可能想尝试一些 jQuery 插件，比如这个：http://www.smoothdivscroll.com/ 然而，我仍然没有弄清楚如何应用它。 - keaukraine

溢出-x和溢出-y无法正常工作的原因可能是由于这个问题：https://dev59.com/NWw15IYBdhLWcg3wv-VM。另外，你的理想行为是什么？ - hajpoj

@hajpoj 是的，我也认为这是这个问题的根本原因。这就是为什么我建议使用一些JS插件而不是使用overflow属性滚动的原因。 - keaukraine

@hajpoj 理想的行为是当第一层菜单滚动时，第二层菜单会显示在主列表的左侧。这个jsfiddle链接是没有溢出选项的：http://jsfiddle.net/pNGtQ/ 我需要的是一样的但是有一个垂直滚动条。 - nextstopsun

Answer 1

在你所描述的情况下，使用overflow将隐藏其中的所有子元素。不幸的是，真的没有什么办法可以解决这个问题。

为什么需要滚动导航下拉菜单？是因为它太长了吗？

如果是这种情况，我建议尝试列式方法。在<li>中放置带有float: left;的<div>，然后在其中放置子菜单。

抱歉，但我认为这是你的问题唯一的答案。

编辑：您可以使用JavaScript和jQuery创建一个浮动的绝对定位容器，该容器显示在用户鼠标的坐标处。不过，这可能会变得非常复杂。

- AJStacy