Dropdown in Topbar

[acmngmbh]

If I add a dropdown menu to a top navigation bar, the dropdown function is not working... Sample:

<div class="topbar">
  <div class="fill">
    <div class="container">
      <h3><a href="#">Bootstrap</a></h3>

      <ul>
        <li class="active"><a href="#masthead">Overview</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#grid-system">Grid</a></li>
        <li><a href="#layouts">Layouts</a></li>
        <li><a href="#typography">Typography</a></li>

        <li><a href="#tables">Tables</a></li>
        <li><a href="#forms">Forms</a></li>
        <li><a href="#navigation">Navigation</a></li>
        <li><a href="#alerts">Alerts</a></li>
        <li><a href="#popovers">Popovers</a></li>
        <li><a href="#less">Less</a></li>
      </ul>

        <ul class="nav secondary-nav">
        <li class="menu">
          <a href="#" class="menu">Dropdown</a>
          <ul class="menu-dropdown">

            <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>
</div>

Is there something wrong in my code?

[fat]

You need javascript to make the dropdown work. To show and hide the menu-dropdown element just toggle the open class on li.menu.

[maddyblue]

From http://twitter.github.com/bootstrap/assets/js/application.js:

  // Dropdown example for topbar nav
  // ===============================

  $("body").bind("click", function (e) {
    $('.dropdown-toggle, .menu').parent("li").removeClass("open");
  });
  $(".dropdown-toggle, .menu").click(function (e) {
    var $li = $(this).parent("li").toggleClass('open');
    return false;
  });