Sub menu not displayed correctly - css

Question

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
New result
http://jsfiddle.net/wn9u5z28/

Answer 1

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"