title: How to make a dropdown sub-menu expand to the right in Bootstrap 3
body: <p>I am using this code and CSS below. As you can see, the dropdown sub-menu expands to the left, which is when I hover my cursor over "More Options". I have changed every "left" keyword on my CSS but it just won't go to the right. How do I expand the dropdown sub-menu to the right, which means if I hover over "More Options", it will expand to the right like this?
  <a href="http://i.stack.imgur.com/paFAK.jpg" rel="nofollow">click here</a></p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
    &lt;div class="btn-group pull-right"&gt;
      &lt;a class="btn dropdown-toggle" data-toggle="dropdown" href="#"&gt;
      Menu
      &lt;span class="caret"&gt;&lt;/span&gt;
      &lt;/a&gt;
        &lt;ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dropdownMenu"&gt;
          &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
          &lt;li class="divider"&gt;&lt;/li&gt;
          &lt;li class="dropdown-submenu dropdown-menu-right"&gt;
          &lt;a tabindex="-1" href="#"&gt;More options&lt;/a&gt;
            &lt;ul class="dropdown-menu"&gt;
              &lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Second level&lt;/a&gt;&lt;/li&gt;
              &lt;li class="dropdown-submenu"&gt;
              &lt;a href="#"&gt;More..&lt;/a&gt;
                &lt;ul class="dropdown-menu"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;3rd level&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;3rd level&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Second level&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Second level&lt;/a&gt;&lt;/li&gt;
           &lt;/ul&gt;
         &lt;/li&gt;
         &lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
       &lt;/ul&gt;
     &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>Here is my CSS;</p>
  
  <pre><code>.dropdown-submenu{position:relative;}
  .dropdown-submenu&gt;.dropdown-menu{top:0;left:-95%;max-width:180px;margin-top:-6px;margin-right:-1px;-webkit-border-radius:6px 6px 6px 6px;-moz-border-radius:6px 6px 6px 6px;border-radius:6px 6px 6px 6px;}
  .dropdown-submenu:hover&gt;.dropdown-menu{display:block;}
  .dropdown-submenu&gt;a:after{display:block;content:" ";float:left;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 5px 5px 0;border-right-color:#999;margin-top:5px;margin-right:10px;}
  .dropdown-submenu:hover&gt;a:after{border-left-color:#ffffff;}
  .dropdown-submenu.pull-left{float:none;}
  .dropdown-submenu.pull-left&gt;.dropdown-menu{left:-100%;margin-left:10px;-webkit-border-radius:6px 6px 6px 6px;-moz-border-radius:6px 6px 6px 6px;border-radius:6px 6px 6px 6px;}
  .dropdown-menu-right {margin-left:0;}
  </code></pre>