jQuery multiple effects on hover (navigation bar)

Question

Hi! I'm new to jQuery, so I think this will be trivial for many. I'm making a navigation bar with sub menus that appear when the main menu are hovered on. I want to change the background image of the main menu and, in the same time, show the sub menu. Here is my code:

$('#nav-list li.products').hover(
        function() { 
            $('#nav-list li.products ul').addClass("hover");
            $(this).css("background-image","url(img/products-hover.png)"); 

        },
        function() {
            $('ul', this).removeClass("hover");
            $(this).css("background-image","url(img/products.png)");
        }
    );

This code only shows the submenu, but doesnt update the style for the main menu. How can I achive this in jQuery? Thanks!