remove active class from sub menu item when other item is clicked

Question

Hi here is my fiddle:

$(function(){

    $('#nav li').on('click', function(){

        $(this).addClass('active').siblings().removeClass('active');
        $(this).find('.sub-menu').addClass('showMenu');

    });
    $('ul#nav > li').hover(function(){
        if ($(this).children('ul').length > 0){    
             $(this).find('.sub-menu').addClass('showMenu');
        }
    }, function(){ 
             $(this).find('.sub-menu').removeClass('showMenu');
    });

how you see in fiddle when you click on each main li item active class is ok, but when you try to click on one of sub menu item it stays active even if I am clicking on other li item.

Answer 1

$(function() {
$('#nav li').on('click', function() {
    $('#nav').find('.active').removeClass('active'); // remove active class in all #nav elements [added]
    $(this).addClass('active');
    $(this).find('.sub-menu').addClass('showMenu');

});
$('ul#nav > li').hover(function(){
    if ($(this).children('ul').length > 0){    
         $(this).find('.sub-menu').addClass('showMenu');
    }
}, function(){ 
         $(this).find('.sub-menu').removeClass('showMenu');
});

Answer 2

$(function(){

    $('#nav li').on('click', function(){

        $(this).addClass('active').siblings().removeClass('active');
        $(this).siblings().find('li').removeClass('active');//added
        $(this).find('.sub-menu').addClass('showMenu');

    });
    $('ul#nav > li').hover(function(){
        if ($(this).children('ul').length > 0){    
             $(this).find('.sub-menu').addClass('showMenu');
        }
    }, function(){ 
             $(this).find('.sub-menu').removeClass('showMenu');
    });

});

http://jsfiddle.net/Hnk9W/26/