如何添加响应式选项卡菜单并缩小 li 菜单项 Bootstrap？

Question

我的网站有一个基于 twitter 引导程序的大型下拉菜单。

我尝试向我的大型下拉项目添加一个选项卡式菜单，它不是引导构建而是响应式的。

但是，它不适合那里，它会包裹整个切换。

这就是我添加全宽巨型下拉菜单的方式。

<li class="dropdown full-width"><a href="#" class="dropdown-toggle" data-toggle="dropdown">TEST<b
        class="icon-angle-down"></b></a>
</li>

您可以在此处VIEW演示页面

当您将鼠标悬停在导航栏“ILETISIM”上的项目上时，它会切换全宽，这正是我想要的。因为我是用 twitter bootstrap 构建的

但是，请检查项目'TEST'。我后来添加的脚本不是 twitter bootstrap 构建的，而是响应式的，它打破了导航栏并使项目的 li 全宽，如下图所示。

到目前为止，我找不到任何解决方案。

我想要的是，它的行为应该与“ILETISIM”项目的工作方式相同。

我将用新菜单替换那个菜单。

Answer 1

将 zozo 选项卡包装在一个 div 中，并像这样给它 100%：

<div class="tab-wrapper dropdown-menu">
 zozo tabs here....
</div>

问题的其余部分与 twitter 导航菜单有关。子菜单在 ul 内悬停时显示，并且您已在 div 内添加了 zozo 选项卡。

/*hide by default*/
.tab-wrapper{
    display: none;
    width: 980px; 
    left: -492.5px;
}
/*display on hover sub menu*/
.navbar ul.nav li:hover > .tab-wrapper {
    display: block;
}

现在默认选项卡会出现一些问题，因为整个元素显示设置为无。

更新： 添加了类选项卡包装器并替换了 css 样式。

更新 2 我意识到你的菜单是绝对定位的。因此，将相同的类添加到 div 下拉菜单中，这将使其绝对与您的风格无关，并添加更多风格。

更新 3 显示移动下拉菜单是因为元素或其容器被隐藏且不显示。我们在它可见后使用刷新方法。

    $(document).ready(function () {
         /*give your li id of test and it fire on mouseover to refresh the tabs*/
        $("#test").on("mouseover", function () {
            $("#tabbed-nav-02").data('zozoTabs').refresh();
        });
    });

您还可以将标签 zozo-tabs 和 zozo-ui 添加到您的 stackoverflow 帖子吗？