CODEWITHSUNDEEP
csstwitter-bootstrapsubmenu
robert gagnon
robert gagnon

Reputation: 311

Sub menu not displayed correctly

i use bootstrap 3 and i try to display a button group with a submenu. i use bootstrap-submenu

i created the menu

http://jsfiddle.net/L8kbaqw3/ 

<div class="btn-group">
        <button class="btn btn-primary" type="button">Actions</button>
        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" data-submenu="" aria-expanded="false">
            <span class="caret"></span>
        </button>

        <ul class="dropdown-menu dropdown-menu-right">
            <li><a tabindex="0">Annuler</a></li>
            <li><a tabindex="0">Sauvegarder</a></li>
            <li class="divider"></li>
            <li class="dropdown-submenu">
                <a tabindex="0">Payer</a>

                <ul class="dropdown-menu">
                  <li><a tabindex="0">Comptant</a></li>
                  <li><a tabindex="0">Débit</a></li>
                  <li><a tabindex="0">Carte de crédit</a></li>
                  <li><a tabindex="0">Carte cadeaux</a></li>
                  <li><a tabindex="0">Chèque</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>

that work fine.

but when i try to add something under it, i don't see all the menu http://jsfiddle.net/hxnznnz6/

it's seem like something block it to display completly the menu.

Also if you compare the layout of the two button, it's different

Edit i removed the first btn-group like @Eduardo Arruda Pimentel said.

look ok, but the sub menu of Payer is not displayed when i click on it

submenu

New result http://jsfiddle.net/wn9u5z28/

Upvotes: 0

Views: 254

Answers (1)

Eduardo Arruda Pimentel
Eduardo Arruda Pimentel

Reputation: 518

1)Bootstrap 3 removed support for multilevel dropdowns, citing usability issues as the cause. As you can see in these two links:

Bootstrap 3 dropdown sub menu missing

Responsive multilevel menu with Bootstrap 3

2) The reason for the different layout is that the code is different. To solve that, just recode and delete this part of line 3:

class="btn-group"

Upvotes: 1

Related Questions