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

Question

My website has mega drop-down menu which is built on twitter bootstrap.

I tried to add a tabbed menu, which is not bootstrap buil but responsive, to my mega drop down item.

However, it doesn't fit there well and it wrap whole toggle.

This is how I add a full width mega dropdown.

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

Here you can VIEW the demo page

When you hover on item on the navbar 'ILETISIM', it toggles full width, which I exactly want. Because I built it with twitter bootstrap

However, please check the item 'TEST' . The script that I added later is not twitter bootstrap built, but responsive and it breaks the navbar and makes the item's li full width as shown in the picture below.

I couldn't find any solutions for that until now.

What I want is, it shall behave as same as how 'ILETISIM' item works.

I will replace that menu with the new one.

Answer 1

Wrap zozo tabs in a div and give it 100% with like so:

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

The rest of the issue is related to twitter nav menu. The sub menu show on hover which is inside ul and you have added zozo tabs inside a div.

/*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;
}

Now there will be some issue with default tab since the whole elements display is set to none.

Update : added class tab-wrapper and replaced the css style.

Update 2 I realized that your menu is absolute positioned. So added the same class the to div dropdown-menu which will make it absolute from your style and added some more style.

Update 3 The mobile dropdown menu shows up because it the element or its container is hidden with display none. We use the refresh method after its visible.

    $(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();
        });
    });

Also could you add tags zozo-tabs and zozo-ui to your stackoverflow post?