Here's my js code:

3. <script type="text/javascript"> 
4. $( document ).ready( function ()
5. {
7. //magazine menu
8. //Set custom configurations for dropdown menu
9. var config = {
10. sensitivity: 2, // number = sensitivity threshold (must be 1 or higher)
11. interval: 50, // number = milliseconds for onMouseOver polling interval
12. over: megaHoverOver, // function = onMouseOver callback (REQUIRED)
13. timeout: 300, // number = milliseconds delay before onMouseOut
14. out: megaHoverOut // function = onMouseOut callback (REQUIRED)
15. };
16. $("ul#main-nav li .sub").css({'opacity':'0'}); //Fade sub nav to 0 opacity on default
17. $("ul#main-nav li").hoverIntent(config); //Trigger Hover intent with custom configurations
18. }
19. );
20. 
    
21.         //hover for magazine dropdown
22. //On Hover Over -> http://www.sohtanaka.com/web-design/mega-drop-downs-w-css-jquery/
23. function megaHoverOver(){
24. $(this).find(".sub").stop().fadeTo('fast', 1).show(); //Find sub and fade it in
25. }
26. //On Hover Out
27. function megaHoverOut(){
28. $(this).find(".sub").stop().fadeTo('fast', 0, function() { //Fade to 0 opactiy
29.  $(this).hide();  //after fading, hide it
30.  });
31. }
32. </script> 

and my HTML code:

2. <ul id="main-nav">
3.             <li><a href="/" id="home" class="current">home</a></li>
4.             <li><a href="#" id="magazine">magazine</a>
5.               <div class="sub">
6.                 [blah] content goes here
7.               </div>
8.             </li>
9.           </ul>

it all works beautifully, except the fact that the nav item takes a :hover attribute that doesn't stay put while the user mouses over the mega menu. the css looks like this:

2. ul#main-nav li a#magazine:hover{
3. background-color:#a5abaf;
4. color:black;
5. }

I tried adding a css class to that menu object on the Hover Over function, but the mouse out event still turns the menu item back to its default color. Any ideas?

Thanks!