title: Why isn't this Bootstrap 2.3.2 dropdown menu working?
body: <p>I have a navigation bar on my website with 4 elements. The first 3 are links, and I want the fourth to be a dropdown menu of links. I've been reading <a href="http://getbootstrap.com/2.3.2/components.html#dropdowns" rel="nofollow">the Bootstrap docs</a>, and can't seem to figure it out. Here is a <a href="http://awesomescreenshot.com/08f2gq3l4b" rel="nofollow">screenshot</a> of what's happening.</p>
  
  <p>This is my code:</p>
  
  <p><strong>application.html.erb</strong></p>
  
  <pre><code>&lt;nav id="main_nav"&gt;
      &lt;div id="logo"&gt;&lt;%= link_to image_tag('logo.jpg', size: "40x40", alt: "College Inside View"), '/' %&gt;&lt;/div&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;%= link_to 'Colleges', '/colleges' %&gt;&lt;/li&gt; 
          &lt;li&gt; &amp;#8226 &lt;/li&gt;
          &lt;li&gt;&lt;%= link_to 'About College', '/about-college/college-life/1' %&gt;&lt;/li&gt; 
          &lt;li&gt; &amp;#8226 &lt;/li&gt;
          &lt;li&gt;&lt;%= link_to 'Advice', '/advice' %&gt;&lt;/li&gt;
          &lt;li&gt; &amp;#8226 &lt;/li&gt;
          &lt;div class="dropdown"&gt;
              &lt;li&gt;&lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;
                 Tools 
                 &lt;b class="caret"&gt;&lt;/b&gt;
              &lt;/a&gt;&lt;/li&gt;
              &lt;ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"&gt;
                  &lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="divider"&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/ul&gt;
      &lt;%= form_tag("/search", :method =&gt; 'get', :id =&gt; 'search_text', :class =&gt; 'form_search ui-autocomplete') do -%&gt; 
          &lt;%= search_field_tag :search, params[:search], :placeholder =&gt; 'enter college', :id =&gt; "search_field", :class =&gt; 'input-medium search-query ui-autocomplete' %&gt;
      &lt;% end -%&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>and <code>$('.dropdown-toggle').dropdown();</code> in javascript file.</p>
  
  <p>What am I doing wrong?</p>
  
  <p><strong>Edit</strong>: I got <a href="http://awesomescreenshot.com/04a2gq8d0c" rel="nofollow">this</a> after trying this:</p>
  
  <pre><code>&lt;nav id="main_nav"&gt;
      &lt;div id="logo"&gt;&lt;%= link_to image_tag('logo.jpg', size: "40x40", alt: "College Inside View"), '/' %&gt;&lt;/div&gt;
      &lt;div class="dropdown"&gt;
          &lt;ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"&gt;
              &lt;li&gt;&lt;%= link_to 'Colleges', '/colleges' %&gt;&lt;/li&gt; 
              &lt;li&gt; &amp;#8226 &lt;/li&gt;
              &lt;li&gt;&lt;%= link_to 'About College', '/about-college/college-life/1' %&gt;&lt;/li&gt; 
              &lt;li&gt; &amp;#8226 &lt;/li&gt;
              &lt;li&gt;&lt;%= link_to 'Advice', '/advice' %&gt;&lt;/li&gt;
              &lt;li&gt; &amp;#8226 &lt;/li&gt;
              &lt;li class="dropdown-submenu"&gt;
                  &lt;a tabindex="-1" href="#"&gt;More options&lt;/a&gt;
                  &lt;ul class="dropdown-menu"&gt;
                      &lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="divider"&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;%= form_tag("/search", :method =&gt; 'get', :id =&gt; 'search_text', :class =&gt; 'form_search ui-autocomplete') do -%&gt; 
          &lt;%= search_field_tag :search, params[:search], :placeholder =&gt; 'enter college', :id =&gt; "search_field", :class =&gt; 'input-medium search-query ui-autocomplete' %&gt;
      &lt;% end -%&gt;
  &lt;/nav&gt;
  </code></pre>