[jQuery] Basic problem - using .click and .hover together on elements

[jez_p]

I'm sure this has a very simple solution, but I am just starting out
and can't work it out, so I would appreciate it if anyone could give
me some help.

I have a basic text menu, which when the menu items are clicked the
page content changes. What I want is for the menu item text to change
color when hovered over - from black to red, and for the menu item
that has been clicked to be red. The hovering part I have is:

  $('li a').hover (function() {
                  $(this).css({color:'red'});
                },
            function(){
                  $(this).css({color:'black'});
                }
        );

For the clicking part I have:

  $('li a').click (function() {
                  $('li a').css({color:'black'}); //to reset the menu items to
black
                  $(this).css({color:'red'});

        });

The problem I have is that the mouse pointer is still hovering over
the menu item after it has been clicked, and when it is moved away it
resets all the menu items back to black - whereas I want it to be red.

I hope I have explained myself clearly.