带有全宽子菜单的下拉菜单答案

【问题标题】：Dropdown menu with full width submenu带有全宽子菜单的下拉菜单
【发布时间】：2013-05-08 13:17:28
【问题描述】：

我正在尝试使用 Bootstrap Twitter 创建下拉菜单。我需要有与主菜单宽度相同的子菜单，并放在它的下方。

Bootstrap 仅向我们提供标准下拉菜单，该菜单位于单击的 li 项目的正下方，宽度取决于此 li。这当然可以理解，因为子菜单是 clicked li 的子菜单，但是你有什么简单的技巧可以让它改变吗？或者唯一的解决方案是为此编写我自己的下拉菜单？

更重要的是，我需要它响应。

【问题讨论】：

【解决方案1】：

您可以调整 .dropdown-submenu 的 CSS 以使其显示在其父下拉菜单下方。

例如，

.dropdown-submenu .dropdown-menu{
    left:10px;
    top:32px;
}

Demo

【讨论】：

【解决方案2】：

您可以将这些样式添加到子菜单中（只需替换您需要与父元素匹配的填充/边距的大小）

.dropdown-menu {
    padding:0 100%;
    margin: 0 -100%;
  }

【讨论】：

【解决方案3】：

使用 jQuery 来做到这一点

$(".dropdown-menu").css("padding","0 100%");
$(".dropdown-menu").css("margin","0 -100%");

【讨论】：