jQuery - IF then Remove class on .hover
<p>I have the following jQuery function:</p>

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

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

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

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

<p>Here is the basic HTML Markup:</p>

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

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