Glitch with bootstrap submenu

I use bootstrap 3, bootstrap table and bootstrap submenu

I have a bootstrap table. On top of it, i have a button with a submenu. In the button, i have some glitch.

Strangely, mouse over work only for Annuler, Payer, Comptant and Rembourser. Also a line start under Payer.

Tried to debug it, but found a solution.

I have an example here https://jsfiddle.net/y0pqux38/

<div id="toolbar" 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 id="cancelPaymentAction" tabindex="0">Annuler</a></li>
        <li class="divider"></li>
        <li><a tabindex="0">Payer</a></li>
        <li class="pull-right"><a data-payment-mode="CASH" tabindex="0">Comptant</a></li>
        <li class="pull-right"><a data-payment-mode="DEBIT" tabindex="0">Débit</a></li>
        <li id="creditCardPaymentAction" class="pull-right"><a data-payment-mode="CREDITCARD" tabindex="0">Carte de crédit</a></li>
        <li class="pull-right"><a data-payment-mode="GIFTCARD" tabindex="0">Carte cadeaux</a></li>
        <li class="pull-right"><a data-payment-mode="CHECK" tabindex="0">Chèque</a></li>
        <li class="divider"></li>
        <li id="refundPaymentAction"><a tabindex="0">Rembourser</a></li>
    </ul>
</div>

Solution

The glitch in bootstrap Submenu happens because of pull-right. Just remove that from all submenu lithen everything works fine.

In case you want to submenu li items to be right aligned use text-right class in place of pull-right

Check Demo HERE

HTML:

<div class="container">
  <div class="row">
    <div class="col-sm-6 centered">
      <div id="toolbar" class="btn-group pull-right">
        <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 id="cancelPaymentAction" tabindex="0">Annuler</a></li>
          <li class="divider"></li>
          <li><a tabindex="0">Payer</a></li>
          <li><a data-payment-mode="CASH" tabindex="0">Comptant</a></li>
          <li><a data-payment-mode="DEBIT" tabindex="0">Débit</a></li>
          <li id="creditCardPaymentAction"><a data-payment-mode="CREDITCARD" tabindex="0">Carte de crédit</a></li>
          <li><a data-payment-mode="GIFTCARD" tabindex="0">Carte cadeaux</a></li>
          <li><a data-payment-mode="CHECK" tabindex="0">Chèque</a></li>
          <li class="divider"></li>
          <li id="refundPaymentAction"><a tabindex="0">Rembourser</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>