jQuery: Preserve hover state when coming off element?
<p>1.I have 2 menus, "Main" &amp; "Sub" - when you hover over a specific link in the main, it highlights the sub menu by adding a class to it...great... thing is when I roll off the "main li link" the colour of the sub nav goes back to normal... - But I need this preserved if I roll onto the sub nav... e.g. them all highlighted...</p>

<ol>
<li>...then.... once I actually hover onto the sub nav....then the highlighting would cease...and only the sub menu item link i roll onto goes the highlighted colour (This can just be the normal "a:hover" state.</li>
</ol>

<p>So I guess in a nutshell..</p>

<p>Hover on a main menu item...the sub-menu items get highlighted... come off the main nav...the sub menu is still highlighted......(though this would only be highlighted if going from main to sub) - anythign else it would loose highlighting) ...then once on sub menu...remove the highlighting (So the standard a:hover for the sub menu get's used...</p>

<p>Here's my code thus far, which activates the global highlighting:</p>

<pre><code>&lt;ul id="primarynav"&gt;
    &lt;li&gt;&lt;a href=""&gt;home&lt;/a&gt;&lt;/li&gt;
    &lt;li class="portfolio"&gt;&lt;a href=""&gt;protfolio&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=""&gt;contact&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;!-- Secondary nav --&gt;

&lt;ul id="secondarynav"&gt;
    &lt;li&gt;&lt;a href=""&gt;Websites&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=""&gt;Graphics&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=""&gt;Drawing&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;


$(document).ready(function(){
    var $primarynav = $('#primarynav .portfolio'),
        $secondarynav = $('#secondarynav');

    $primarynav.hover(function(){
        $secondarynav.addClass('highlight');
    }, function(){
        $secondarynav.removeClass('highlight');
    });
});
</code></pre>
