CSS dropdown menu not closing after click

Question

I'm using the following tutorial: http://www.script-tutorials.com/css3-metal-menu-with-icons/

The problem is that when I click any element on the submenu, the submenu won't close. My app is using a jQuery UI tab to dynamically add a tab with the content as one partial view (mvc4) so that the app page isn't reloaded. I would like to hide the submenu when an item is clicked, how can i do that?

Answer 1

Since you're using jQuery, I would do something like traversing the parents if you know the exact depths, using a click event handler (where e is the event): $(e.target).parent().parent().hide(), etc

If it could be dynamic, you can do it slightly less efficiently, but in one go: $(e.target).parents('.thedropdownmenuclass').hide()

Answer 2

The submenus are all located in a div with class named subs. You could hide that with JQuery.

$('html').click(function() {
  $(".subs").hide();
});

All clicks, anywhere should now hide the submenus or any other element with the class subs