Twitter Bootstrap dropdown menu

Question

I'm trying to use Twitter Bootstrap's dropdown menu in its top nav bar. You can see an example working here. http://twitter.github.com/bootstrap/#

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.

Can you see what I'm doing wrong?

My dropdown

  <div class='topbar' data-dropdown="dropdown">    <div class='fill'>     <div class='container'>     <ul class="nav">        <li><%= link_to 'Home', main_app.root_path %></li>           <li><%= link_to 'Outlines', main_app.outlines_path %></li>        <li class="dropdown">         <a href="#" class="dropdown-toggle">Assessment</a>         <ul class="dropdown-menu">         <li><a href="#">second link </a></li>         <li><a href="#">third link </a></li>         </ul>       </li>    ..... I go on to close all the divs etc. The nav bar looks great but the dropdown just doesn't work.  

Twitter Bootstrap

<div class="topbar" data-dropdown="dropdown">   <div class="topbar-inner">     <div class="container">       <h3><a href="#">Project Name</a></h3>       <ul class="nav">         <li class="active"><a href="#">Home</a></li>         <li><a href="#">Link</a></li>         <li><a href="#">Link</a></li>         <li><a href="#">Link</a></li>         <li class="dropdown">           <a href="#" class="dropdown-toggle">Dropdown</a>           <ul class="dropdown-menu">             <li><a href="#">Secondary link</a></li>             <li><a href="#">Something else here</a></li>             <li class="divider"></li>             <li><a href="#">Another link</a></li>           </ul>         </li>       </ul>       <form class="pull-left" action="">         <input type="text" placeholder="Search">       </form>       <ul class="nav secondary-nav">         <li class="dropdown">           <a href="#" class="dropdown-toggle">Dropdown</a>           <ul class="dropdown-menu">             <li><a href="#">Secondary link</a></li>             <li><a href="#">Something else here</a></li>             <li class="divider"></li>             <li><a href="#">Another link</a></li>           </ul>         </li>       </ul>     </div>   </div><!-- /topbar-inner --> </div> 

Answer 1

It actually requires inclusion of Twitter Bootstrap's dropdown.js

http://getbootstrap.com/2.3.2/components.html