title: Bootstrap nav dropdown-menu only showing horizontally (Rails 3.2.13, bootstrap-sass 2.3.1.2, jquery-rails 2.2.1)
body: <p>Using twitter bootstrap in a rails project, I'm aiming to get something looking like this (nice and simple, and readily achievable by putting the below code into jsfiddle to prove I'm not going crazy!). There follows a rather ascii art picture as unfortunately I can't post images yet:</p>
  
  <pre><code>menu1 menu2 my account
             |  item1   |
             |  item2   |
              ---------
  </code></pre>
  
  <p>the HTML looks like this</p>
  
  <pre><code>&lt;div class="navbar"&gt;
  &lt;div class="navbar-inner"&gt;
  &lt;div class="container"&gt;     
  &lt;ul class="nav"&gt;
  &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;li class="dropdown"&gt;
  &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;
  My Account
  &lt;b class="caret"&gt;&lt;/b&gt;
  &lt;/a&gt;
  &lt;ul class="dropdown-menu"&gt;
  &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;&lt;!-- /.navbar --&gt;
  </code></pre>
  
  <p>I'm using Rails 3.2.13 with the bootstrap-sass 2.3.1.2 and jquery-rails 2.2.1 gems. The problem I'm having is, that no matter what I do, the dropdown menu is rendered horizontally (and in the wrong place). (again, forgive me the ascii art - sorry!)</p>
  
  <pre><code>home home my account
  [item1 item2]
  </code></pre>
  
  <p>I've googled, looked all over stack exchange, been digging in firebug to see if there's anything obvious I'm missing, but no joy - does anyone know if there's an issue with the gems or version of bootstrap I'm using (that's implied by the gem I guess)? Or have any suggestions as to what I might be missing?</p>
  
  <p>In case it's something like a typo, the actual code I'm using is:</p>
  
  <pre><code>&lt;div class="masthead"&gt;
      &lt;div class="container"&gt;
      &lt;h3 class="muted pull-left"&gt;Page&lt;/h3&gt;
      &lt;% if current_user %&gt;  
      &lt;p class="muted pull-right" style="margin-top:23px;"&gt;Logged in as: &lt;%= current_user.email %&gt;&lt;/p&gt;
      &lt;% else %&gt;
      &lt;% end %&gt;
      &lt;/div&gt;
      &lt;div class="navbar"&gt;
          &lt;div class="navbar-inner"&gt;
              &lt;div class="container"&gt;
                  &lt;ul class="nav"&gt;
                      &lt;li class="active"&gt;&lt;%= link_to 'Home', root_path %&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;%= link_to 'Blog', posts_path %&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;%= link_to 'Demo', demo_path %&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;%= link_to 'About', about_path %&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;%= link_to 'Contact', contact_path %&gt;&lt;/li&gt;
                      &lt;% if current_user %&gt;
                      &lt;li class="dropdown"&gt;
                          &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;
                              My Account
                              &lt;b class="caret"&gt;&lt;/b&gt;
                          &lt;/a&gt;
                          &lt;ul class="pull-right dropdown-menu"&gt;
                              &lt;li&gt;&lt;%= link_to 'Personal Details', demo_path %&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;%= link_to 'Payment History', about_path %&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;%= link_to 'Account Settings', about_path %&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;%= link_to "Log out", log_out_path %&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
  
                      &lt;% else %&gt;
                          &lt;li&gt;&lt;%= link_to "Sign up", sign_up_path %&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;%= link_to "Log in", log_in_path %&gt;&lt;/li&gt;
                      &lt;% end %&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;&lt;!-- /.navbar --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The only css override stuff for the nav looks like this:</p>
  
  <pre><code>.navbar .navbar-inner {
    padding: 0;
  }
  .navbar .nav {
    margin: 0;
    display: table;
    width: 100%;
  }
  .navbar .nav li {
    display: table-cell;
    width: 1%;
    float: none;
  }
  .navbar .nav li a {
    font-weight: bold;
    text-align: center;
    border-left: 1px solid rgba(255,255,255,.75);
    border-right: 1px solid rgba(0,0,0,.1);
  }
  .navbar .nav li:first-child a {
    border-left: 0;
    border-radius: 3px 0 0 3px;
  }
  .navbar .nav li:last-child a {
    border-right: 0;
    border-radius: 0 3px 3px 0;
  }
  </code></pre>
  
  <p>and the includes in the page as it's rendered are as follows:</p>
  
  <pre><code>&lt;link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" /&gt;
  &lt;link href="/assets/bootstrap_and_overrides.css?body=1" media="all" rel="stylesheet" type="text/css" /&gt;
  &lt;link href="/assets/comments.css?body=1" media="all" rel="stylesheet" type="text/css" /&gt;
  &lt;link href="/assets/home.css?body=1" media="all" rel="stylesheet" type="text/css" /&gt;
  &lt;link href="/assets/posts.css?body=1" media="all" rel="stylesheet" type="text/css" /&gt;
  &lt;link href="/assets/scaffolds.css?body=1" media="all" rel="stylesheet" type="text/css" /&gt;
  &lt;link href="/assets/sessions.css?body=1" media="all" rel="stylesheet" type="text/css" /&gt;
  &lt;link href="/assets/users.css?body=1" media="all" rel="stylesheet" type="text/css" /&gt;
  &lt;script src="/assets/jquery.js?body=1" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="/assets/jquery_ujs.js?body=1" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="/assets/bootstrap-transition.js?body=1" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="/assets/bootstrap-affix.js?body=1" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="/assets/bootstrap-alert.js?body=1" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="/assets/bootstrap-button.js?body=1" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="/assets/bootstrap-carousel.js?body=1" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="/assets/bootstrap-collapse.js?body=1" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="/assets/bootstrap-dropdown.js?body=1" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="/assets/bootstrap-modal.js?body=1" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="/assets/bootstrap-scrollspy.js?body=1" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="/assets/bootstrap-tab.js?body=1" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="/assets/bootstrap-tooltip.js?body=1" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="/assets/bootstrap-popover.js?body=1" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="/assets/bootstrap-typeahead.js?body=1" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="/assets/bootstrap.js?body=1" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="/assets/comments.js?body=1" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="/assets/home.js?body=1" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="/assets/posts.js?body=1" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="/assets/sessions.js?body=1" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="/assets/users.js?body=1" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="/assets/application.js?body=1" type="text/javascript"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>more than happy to provide other bits if it helps - thank you.</p>
  
  <p><strong>UPDATE</strong> Thanks to David, I've narrowed it down to:</p>
  
  <pre><code>.navbar .nav li {
  display: table-cell;
  width: 1%;
  float: none;
  }
  </code></pre>
  
  <p>specifically</p>
  
  <pre><code>display: table-cell;
  </code></pre>
  
  <p>which is used to distribute the menu items evenly. If I take that out, the menu will render vertically, but then the bootstrap layout goes haywire - at this point I don't really know why. Does anyone know (or even better, how to fix it)? Thank you.</p>
  
  <p>I don't have Chrome to test with, but it's not just Firefox, I get the same issue in Safari.</p>