Q:

How to make a menu to remain visible after a parent / child has been clicked on

Hi thanks to this jsfiddle i've got mine working: http://jsfiddle.net/cesarvinas/ZQWe7/18
this is what i made:
http://jsfiddle.net/Kp4nd/5/
as you can see it adds a class and the removes.
if you click on MENU 1 - you see that menu 1 submenu item 1 is also active. But when i click on menu 1 submenu 2, submenu 1 is still active.
I've put the <li><a href="#">MENU 1</a> between <span></span> and that did the trick. But now my menu doesn't stay active...
And then i've got another problem. When you click on menu 2 the menu 1 submenu 1 is also then active, this should be then menu 2 submenu 1.
How can i fix it that it takes the right first-child item?
Thank you! 

A:

See this:  Sample
$('ul li').click(function (e) {
  e.preventDefault();
  $(this).siblings().removeClass('currentParent');
  $(this).addClass('currentParent');
  $(this).find('ul li:first').addClass('currentChild').siblings().removeClass('currentChild').addClass('notSelected');
});

$('ul li ul li').click(function (e) {
  e.preventDefault();
  $(this).siblings().removeClass('currentChild').addClass('notSelected');
  $(this).removeClass('notSelected').addClass('currentChild');
  e.stopPropagation();
});

