Question

I have found the following jquery code for an drop-down-menu.
What should the HTML code contain to work with it?

jQuery(document).ready(function(){

  jQuery("html").bind("click", function (e) {
    jQuery('.dropdown-toggle, a.menu').parent("li").removeClass("open");
  });

  jQuery(".dropdown-toggle, a.menu").click(function(e) {

    //  First look an see if a menu is open.  If it is, then just close it.
    if (jQuery(this).parent("li").hasClass("open")) {
        jQuery("ul").find('li').removeClass('open');
    }

    //  If menu was not open, then close any other menus that were open and just open the one.
    else {
        jQuery("ul").find('li').removeClass('open');
        jQuery(this).parent("li").addClass('open');
    }
    return false;
  });

});

Answer 1

You need this HTML:

<div class="dropdown">
  <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

Or, another method:

<div class="dropdown">
  <a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
    Dropdown
    <b class="caret"></b>
  </a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

Inside the <UL>, you need to give this way:

<ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
  <li><a href="#">Action</a></li>
  <li><a href="#">Another action</a></li>
  <li><a href="#">Something else here</a></li>
  <li class="divider"></li>
  <li><a href="#">Separated link</a></li>
</ul>

If you want to give a divider, you can give this way:

<li class="divider"></li>

If you wanna invoke it by JavaScript, you can use this code:

$('.dropdown-toggle').dropdown()

And it displays this way:

It is Twitter Bootstrap‘s JavaScript DropDown menu plugin. You can know more about it here.