how to make twitter bootstrap submenu to open on the left side?

I was trying to create twitter bootstrap submenu in dropdown menu, but I've got a problem: I have dropdown menu in the top right corner of the page and that menu has one more submenu. However, when submenu opens - it does not fit in the window and goes too much to the right, so that user can see only first letters. How to make that submenu to open not to the right, but to the left?


If I've understood this right, bootstrap provides a CSS class for just this case. Add 'pull-right' to the menu 'ul':

<ul class="dropdown-menu pull-right">

..and the end result is that the menu options appear right-aligned, in line with the button they drop down from.


The simplest way would be to add the pull-left class to your dropdown-submenu

<li class="dropdown-submenu pull-left">

jsfiddle: DEMO