I can't seem to get a dropdown menu working as the fourth element in the navigation bar on my website. Despite referencing the Bootstrap documentation, I'm still struggling with it. Here's a screenshot of the issue.
This is the code I currently have:
application.html.erb
<nav id="main_nav">
<div id="logo"><%= link_to image_tag('logo.jpg', size: "40x40", alt: "College Inside View"), '/' %></div>
<ul>
<li><%= link_to 'Colleges', '/colleges' %></li>
<li> • </li>
<li><%= link_to 'About College', '/about-college/college-life/1' %></li>
<li> • </li>
<li><%= link_to 'Advice', '/advice' %></li>
<li> • </li>
<div class="dropdown">
<li><a href="#" class="dropdown-toggle" data-toggle="dropdown">
Tools
<b class="caret"></b>
</a></li>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something else here</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
</ul>
<%= form_tag("/search", :method => 'get', :id => 'search_text', :class => 'form_search ui-autocomplete') do -%>
<%= search_field_tag :search, params[:search], :placeholder => 'enter college', :id => "search_field", :class => 'input-medium search-query ui-autocomplete' %>
<% end -%>
</nav>
I also have
$('.dropdown-toggle').dropdown();What am I missing or doing wrong?
Edit: After attempting this adjustment, I encountered this issue:
<nav id="main_nav">
<div id="logo"><%= link_to image_tag('logo.jpg', size: "40x40", alt: "College Inside View"), '/' %></div>
<div class="dropdown">
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li><%= link_to 'Colleges', '/colleges' %></li>
<li> • </li>
<li><%= link_to 'About College', '/about-college/college-life/1' %></li>
<li> • </li>
<li><%= link_to 'Advice', '/advice' %></li>
<li> • </li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#">More options</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something else here</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div>
<%= form_tag("/search", :method => 'get', :id => 'search_text', :class => 'form_search ui-autocomplete') do -%>
<%= search_field_tag :search, params[:search], :placeholder => 'enter college', :id => "search_field", :class => 'input-medium search-query ui-autocomplete' %>
<% end -%>
</nav>