Question

This is my Jquery for my tabbed menu:

var current = $('li.selected');
$('li.selected #submenu').css("display", "block").addClass('lihovered');
current.addClass('lihovered');
    $("ul#ulmenu li").hover(function() { //Hover over event on list item
        $(this).find("#submenu").show(); //Show the subnav
        $(this).addClass('lihovered');
        current.removeClass('lihovered');
    } , function() { //on hover out...
        $(this).find("#submenu").hide(); //Hide the subnav
        $(this).removeClass('lihovered');
        current.addClass('lihovered');
    });

    $("ul#submenu").hover(function() { //Hover over event on list item
        $(this).show(); //Show the subnav
        $(this).parent("li").addClass('lihovered');
        $(this).parent("li").find('a').addClass('lihovereda');
    } , function() { //on hover out...
        $(this).find("#submenu").hide(); //Hide the subnav
        $(this).parent("li").removeClass('lihovered');
        $(this).parent("li").find('a').removeClass('lihovereda');
        current.addClass('lihovered');
    });

The problem is that when hovered hover the li that is selected the bagground is removed.
Therefor I want to disable this function:

        $("ul#ulmenu li").hover(function() { //Hover over event on list item
            $(this).find("#submenu").show(); //Show the subnav
            $(this).addClass('lihovered');
            current.removeClass('lihovered');
        } , function() { //on hover out...
            $(this).find("#submenu").hide(); //Hide the subnav
            $(this).removeClass('lihovered');
            current.addClass('lihovered');
        });

for $('li.selected');

And I also have that problem when hovering hover an another li element in the menu the selected submenu gets hidden. Therefor I want to disable this function:

    $("ul#submenu").hover(function() { //Hover over event on list item
        $(this).show(); //Show the subnav
        $(this).parent("li").addClass('lihovered');
        $(this).parent("li").find('a').addClass('lihovereda');
    } , function() { //on hover out...
        $(this).find("#submenu").hide(); //Hide the subnav
        $(this).parent("li").removeClass('lihovered');
        $(this).parent("li").find('a').removeClass('lihovereda');
        current.addClass('lihovered');
    });

for $('li.selected #submenu');

The problem is that the #li.selected #submenu gets hidden when hovering over the submenu or the li element. Which it should not do.

Update, I have tried this but it is (was not) working:

$("ul#ulmenu li").hover(function() { //Hover over event on list item
    if($(this).hasClass('selected')) {
    } else {
    $(this).find("#submenu").show(); //Show the subnav
    $(this).addClass('lihovered');
    current.removeClass('lihovered');
    }
} , function() { //on hover out...
    $(this).find("#submenu").hide(); //Hide the subnav
    $(this).removeClass('lihovered');
    current.addClass('lihovered');
});

But it is very ugly with if else statements.

Answer 1

Use the not() method: http://api.jquery.com/not/

$("ul#ulmenu li").not('.selected').hover(function() {

and :not selector http://api.jquery.com/not-selector/

$('li:not(.selected) ul#submenu').hover(function() {