title: float bootstrap dropdown list above content and right side of the sidebar main menu
body: <p>I can't figure out how to move the dropdown list so that it gets positioned on the right side of my main menus. Please see this screenshot that I want to achieve. <a href="http://i.imgur.com/nlAJgaC.png" rel="nofollow">http://i.imgur.com/nlAJgaC.png</a></p>
  
  <p>Here is the code</p>
  
  <pre><code>&lt;div id="sidebar-left" class="col-xs-2 col-sm-2 hidden-lg"&gt;
      &lt;ul class="nav main-menu"&gt;
          &lt;li&gt;
              &lt;a href="#" class="align-center"&gt;
                  &lt;i class="fa fa-dashboard"&gt;&lt;/i&gt;
                  &lt;span class="adClass hidden-xs"&gt;Menu 1&lt;/span&gt;
              &lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="dropdown"&gt;
              &lt;a class="align-center dropdown-toggle"&gt;
                  &lt;i class="fa fa-print"&gt;&lt;/i&gt;
                  &lt;span class="adClass hidden-xs"&gt;Odometer&lt;/span&gt;
              &lt;/a&gt;
              &lt;ul class="dropdown-menu"&gt;
                  &lt;li&gt;&lt;a ng-click="stopIt($event, 'submenu1')"&gt;submenu1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a ng-click="stopIt($event, 'submenu2')"&gt;submenu2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a ng-click="stopIt($event, 'submenu3')"&gt;submenu3&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a ng-click="stopIt($event, 'submenu4')"&gt;submenu4&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a href="#" class="align-center"&gt;
                  &lt;i class="fa fa-mobile"&gt;&lt;/i&gt;
                  &lt;span class="adClass hidden-xs"&gt;Menu 2&lt;/span&gt;
              &lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a href="#" class="align-center"&gt;
                  &lt;i class="fa fa-flask"&gt;&lt;/i&gt;
                  &lt;span class="adClass hidden-xs"&gt;Menu 3&lt;/span&gt;
              &lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a href="#" class="align-center"&gt;
                  &lt;i class="fa fa-bar-chart-o"&gt;&lt;/i&gt;
                  &lt;span class="adClass hidden-xs"&gt;Menu 4&lt;/span&gt;
              &lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a href="#" class="align-center"&gt;
                  &lt;i class="fa fa-cogs"&gt;&lt;/i&gt;
                  &lt;span class="adClass hidden-xs"&gt;Menu 5&lt;/span&gt;
              &lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a href="#" class="align-center"&gt;
                  &lt;i class="fa fa-clipboard"&gt;&lt;/i&gt;
                  &lt;span class="adClass hidden-xs"&gt;Menu 6&lt;/span&gt;
              &lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>