I have the following jQuery function:

$(function(){
            if ($(".menu li").hasClass("active")) {
                    $(".active").css("margin-top", "6px");
              }
        });

This is applied to a CSS/jQuery menu, which expands and contracts when each menu item is hovered over. The onClick event adds a margin-top of 6px to give the impressions of a button depress.

I'm then using PHP to detect which page the user is visiting to add an .active class to the relevant menu item.

The question, the .active class should remain in place until the user hovers over a different menu item. At which point the .active class should be removed from this element - As the .active class is reused on the .hover events.

Here is the basic HTML Markup:

<ul id="menu">
<li>
<div class="inner">
<div class="button"><img src="images/insightbutton.png" /></div>
<div class="description">&nbsp;</div>
</div>
</li>
<li>
<div class="inner">
<div class="button"><img src="images/insightbutton.png" /></div>
<div class="description">&nbsp;</div>
</div>
</li>
</ul>

How can I keep the .active class applied to the active menu item, but remove it when .inner is hovered over?