Hello! I have made a menu that adds class "active" on hover to each li, and removes the class when hovered out, except on li s that has a class "active" already. So far, this is done. However I have another .click() on every li that loads a content to somewhere with ajax. The problem starts here, when I click, I want to add class "active" to clicked element and remove class from all of them. I add the class, but the li that had class "active" before the click doesn't get "active" when hovered, I think the "active" class is not removed from it? Can anyone help?

    <div id="menu">
    <ul>
        <li><a href="index.php" id="homeLink">home</a></li>
        <li><a href="#">news</a></li>
        <li><a id="test" href="#"  class="active">blog</a></li>
        <li><a href="#">gallery</a></li>
        <li><a href="#">about</a></li>
        <li><a href="contact.php" id="contactLink">contact</a></li>
                    <li id="ajaxP" style="display:none"><img alt="loading" style="border:none;" src="images/ajax-loader.gif"/></li>
    </ul>
</div>

Here is the jquery:

     $("#menu").find("a").not(".active").each(function(){
    $(this).hover(function(){
        alert($(this));
        $(this).addClass("active");
    },function(){
       $(this).not(".clicking").removeClass("active");
    });
    });
 $("#homeLink").click(function(){
     var myThis=$(this);
     $("#ajaxP").fadeIn("slow");
     $("#normalcontent").hide("slow").load("index.php #normalcontent").slideDown("slow");
     $("#primarycontainer").hide("slow").load("index.php #primarycontainer").slideDown("slow");
     $("#ajaxP").fadeOut("normal");
     $("#menu").find("a").each(function(){
         $(this).unbind('mouseover').unbind("mouseout");
         $(this).removeClass("active clicking");
     });
     myThis.addClass("active clicking");
     return false;
 });