Why isn't this Bootstrap 2.3.2 dropdown menu working?

Question

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 the Bootstrap docs, and can't seem to figure it out. Here is a screenshot of what's happening.

This is my code:

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> &#8226 </li>
        <li><%= link_to 'About College', '/about-college/college-life/1' %></li> 
        <li> &#8226 </li>
        <li><%= link_to 'Advice', '/advice' %></li>
        <li> &#8226 </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>

and $('.dropdown-toggle').dropdown(); in javascript file.

What am I doing wrong?

Edit: I got this after trying this:

<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> &#8226 </li>
            <li><%= link_to 'About College', '/about-college/college-life/1' %></li> 
            <li> &#8226 </li>
            <li><%= link_to 'Advice', '/advice' %></li>
            <li> &#8226 </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>

not sure if this is your problem but I had an issue with responsive 2.3.2 dropdowns and it looks similar. I found this fix on SO: $('.dropdown-toggle').click(function(e) { e.preventDefault(); setTimeout($.proxy(function() { if ('ontouchstart' in document.documentElement) { $(this).siblings('.dropdown-backdrop').off().remove(); } }, this), 0); }); — David Duncan, Mar 09 '14 at 17:24
It could be that you're not handling the submenus properly: http://getbootstrap.com/2.3.2/components.html#dropdowns — Brad Rem, Mar 09 '14 at 17:28

score 3 · Accepted Answer · edited May 23 '17 at 12:28

3

Your HTML is not structured well and probably not in the format bootstrap expects.

Check the section Sub Menus or DRop Downs, and use this valid HTML shown there

<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
  ...
  <li class="dropdown-submenu">
    <a tabindex="-1" href="#">More options</a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
</ul>

Basically you shouldnt keep div as a immediate child of ul. See here Instead put yout second level ul as a child of the li

http://www.bootply.com/120623

edited May 23 '17 at 12:28

Community

1
1

answered Mar 09 '14 at 17:35

sabithpocker

15,274
1
42
75

Please explain what you are expecting and how is the behavior different from what you are getting. – sabithpocker Mar 10 '14 at 07:11
The nav bar should look like [this](http://awesomescreenshot.com/0872gvko44), and the dropdown should appear underneath Tools when you click Tools, and should look like [this](http://getbootstrap.com/2.3.2/components.html#dropdowns). – Adam Zerner Mar 10 '14 at 15:44
so the issue is with styling? or are you saying that the dropdown is not working? – sabithpocker Mar 10 '14 at 17:14
create a [jsfiddle](http://jsfiddle.net/) of your page so that we can easily debug and you get some answer. – sabithpocker Mar 10 '14 at 17:28
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/49418/discussion-between-adam-zerner-and-sabithpocker) – Adam Zerner Mar 10 '14 at 17:55
I got it working, thanks. The relevant changes to css were to get rid of `display: inline;` and `position: relative;` in `#main_nav ul`. – Adam Zerner Mar 10 '14 at 19:39

Why isn't this Bootstrap 2.3.2 dropdown menu working?

1 Answers1