Question

Can someone explain this to me? I’m trying to understand exactly why drop down lists inside a li tag work okay but when using a form the menu disappears when clicked anywhere.

menu.find('ul li > a').bind('click', function (event) {
  event.stopPropagation();
}

It works in combo with:

$("html").click(function() {
  menu.find('.active').removeClass('active');
});

Full code with menu example:

http://jsfiddle.net/e4yy4/

Answer 1

This bit of code

$("html").click(function() {
  menu.find('.active').removeClass('active');
});

would remove the active class of the menu and so hide it when ever a click is detected anywhere on the page.

But

menu.find('ul li > a').bind('click', function (event) {
  event.stopPropagation();});

Would override the first piece of code when the click is detected in the drop down list.

So you can add the below code to override the first piece of code so it also cancel the hiding when clicking in the form.

menu.find('ul > form').bind('click', function (event) {
  event.stopPropagation();});

Just like this
http://jsfiddle.net/Quincy/e4yy4/3/