title: Need to right align Bootstrap Navbar but left align it's sub-menu's
body: <p>I'm using a Bootstrap Navbar that is right aligned using the pull-right class.  When I add a dropdown to the navbar, that dropdown's sub-menu is also right aligned with it's parent which doesn't look good.  How do I get it to be left aligned with the parent?  I've tried adding the pull-left class just about everywhere I can think of, but doesn't seem to work.  Ideas?</p>
  
  <p>Here's the code:</p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
          "http://www.w3.org/TR/html4/loose.dtd"&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt;
      &lt;meta name="viewport" content="width=device-width"&gt;
  
      &lt;link rel="stylesheet" href="css/bootstrap.css"&gt;
      &lt;style&gt;
          body {
              padding-top: 60px;
              padding-bottom: 40px;
          }
          .menu {
              font-size: 18px;
              margin-top: 10px;
          }
          .menu_icon {
              margin-top: 3px;
          }
          .dropdown-menu .sub-menu {
              left: 100%;
              position: absolute;
              top: 0;
              visibility: hidden;
              margin-top: -1px;
          }
          .dropdown-menu li:hover .sub-menu {
              visibility: visible;
          }
          .dropdown:hover .dropdown-menu {
              display: block;
          }
          .nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu {
              margin-top: 0;
          }
      &lt;/style&gt;
      &lt;link rel="stylesheet" href="css/bootstrap-responsive.css"&gt;
  
      &lt;script src="js/vendor/modernizr-2.6.1-respond-1.1.0.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="navbar navbar-fixed-top"&gt;
      &lt;div class="navbar-inner"&gt;
          &lt;div class="container"&gt;
              &lt;a class="brand" href="#"&gt;My Brand&lt;/a&gt;
              &lt;div class="nav-collapse"&gt;
                  &lt;ul class="nav pull-right"&gt;
                      &lt;li&gt;&lt;a class="menu" href="index.php"&gt;&lt;i class="icon-home icon-black menu_icon"&gt;&lt;/i&gt; Home&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="dropdown"&gt;
                          &lt;a class="dropdown-toggle menu" data-toggle="dropdown" href="#about"&gt;Dropdown &lt;b
                                  class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
                          &lt;ul class="dropdown-menu"&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="nav-header"&gt;Nav header&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;One more separated link&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a class="menu" href="#"&gt;&lt;i class="icon-wrench icon-black menu_icon"&gt;&lt;/i&gt; Link 1&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a class="menu" href="#"&gt;&lt;i class="icon-tag icon-black menu_icon"&gt;&lt;/i&gt; Link 2&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a class="menu" href="#"&gt;&lt;i class="icon-envelope icon-black menu_icon"&gt;&lt;/i&gt; Link 3&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
              &lt;!--/.nav-collapse --&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>