title: Twitter Bootstrap dropdown menu
body: <p>I'm trying to use Twitter Bootstrap's dropdown menu in its top nav bar. You can see an example working here. <a href="http://twitter.github.com/bootstrap/#" rel="noreferrer">http://twitter.github.com/bootstrap/#</a></p>
  
  <p>In mine, the arrow indicating that it's a dropdown shows on the menu but when I hover or click on it it doesn't reveal my dropdown links. I think I've included all the necessary classes, and I don't believe Twitter's requires javascript. </p>
  
  <p>Can you see what I'm doing wrong?</p>
  
  <p>My dropdown</p>
  
  <pre><code>  &lt;div class='topbar' data-dropdown="dropdown"&gt;
  
    &lt;div class='fill'&gt;
      &lt;div class='container'&gt;
      &lt;ul class="nav"&gt;
  
        &lt;li&gt;&lt;%= link_to 'Home', main_app.root_path %&gt;&lt;/li&gt;
            &lt;li&gt;&lt;%= link_to 'Outlines', main_app.outlines_path %&gt;&lt;/li&gt;
         &lt;li class="dropdown"&gt;
          &lt;a href="#" class="dropdown-toggle"&gt;Assessment&lt;/a&gt;
          &lt;ul class="dropdown-menu"&gt;
          &lt;li&gt;&lt;a href="#"&gt;second link &lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;third link &lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
  
    ..... I go on to close all the divs etc. The nav bar looks great but the dropdown just doesn't work. 
  </code></pre>
  
  <p>Twitter Bootstrap</p>
  
  <pre><code>&lt;div class="topbar" data-dropdown="dropdown"&gt;
    &lt;div class="topbar-inner"&gt;
      &lt;div class="container"&gt;
        &lt;h3&gt;&lt;a href="#"&gt;Project Name&lt;/a&gt;&lt;/h3&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;Link&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
          &lt;li class="dropdown"&gt;
            &lt;a href="#" class="dropdown-toggle"&gt;Dropdown&lt;/a&gt;
            &lt;ul class="dropdown-menu"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Secondary link&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&gt;&lt;a href="#"&gt;Another link&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
        &lt;form class="pull-left" action=""&gt;
          &lt;input type="text" placeholder="Search"&gt;
        &lt;/form&gt;
        &lt;ul class="nav secondary-nav"&gt;
          &lt;li class="dropdown"&gt;
            &lt;a href="#" class="dropdown-toggle"&gt;Dropdown&lt;/a&gt;
            &lt;ul class="dropdown-menu"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Secondary link&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&gt;&lt;a href="#"&gt;Another link&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;&lt;!-- /topbar-inner --&gt;
  &lt;/div&gt;
  </code></pre>