如何添加响应标签菜单和缩小li菜单项Bootstrap？

Question

我的网站上有一个基于twitter bootstrap构建的超级下拉菜单。

我尝试在我的超级下拉项目中添加一个选项卡式菜单，该菜单不是bootstrap构建，而是响应式的。

然而，它不适合那里，它包裹整个切换。

这就是我添加全宽大型下拉列表的方式。

<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

将div中的zozo标签包裹起来，然后像这样给出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;
}

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

<强>更新： 添加了class tab-wrapper并替换了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();
        });
    });

你还可以在你的stackoverflow帖子中添加标签zozo-tabs和zozo-ui吗？