JQuery: выпадающее меню не исчезнет после нажатия вне меню

Привязать событие click к html для захвата любого щелчка и скрыть его

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

Then override that on your menu's click event using .stopPropagation();

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

Fiddle: http://jsfiddle.net/rKaPN/12/

Вы также можете добавить это, так что пользователю не нужно щелкнуть

$("body:not(.menu)").hover(function(){ $(".menu").find('.active').removeClass('active');})

При открытии меню создайте прозрачный оверлейный div с одинаковой шириной и высотой окна. При щелчке этого div, закройте меню и уничтожьте div.

Вместо того чтобы проверять каждый щелчок на элементе html dom, вы можете привязать событие размытия к определенному элементу меню, когда вы активируете его, затем выключите его, когда будет запущено событие размытия. Замените эти несколько строк:

  //displaying the drop down menu
  $(this).parent().parent().find('.active').removeClass('active');
  $(this).parent().addClass('active');

с этими:

  //displaying the drop down menu
  $('.active').removeClass('active');
  $(this).parent().addClass('active');
  $(this).blur(function() {
      $('.active').removeClass('active');
  });