Control list item while hovered on corresponding div element
<p>I'm using a combination of the solutions <a href="http://stackoverflow.com/questions/9245182/how-can-i-show-a-div-only-when-hovering-a-menu-item-or-the-div">here</a>. I'm applying a background color on hover for each link. I would like each link to maintain it's background color while hovering on it's corresponding div that shows on hover. Everything except the getValue and appliHover variables. I don't know what I'm missing. Here's the code I'm working with:</p>

<pre><code>&lt;style type="text/css"&gt;
&lt;!--
ul.main-nav-list li { display: inline; }
ul.main-nav-list a { background: #red; }
ul.main-nav-list a.hover, ul.main-nav-list a:hover { background: #ccc }
div.mega-container { display: none; width: 600px; background: #ccc; }
--&gt;
&lt;/style&gt;
&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"&gt;&lt;/script&gt;
&lt;script&gt;$(document).ready(function () {

       var timeout
       var counter = 1
       var widgetCounter = 1

        $('ul.main-nav-list a').each(function(){
            $(this).attr('rel', 'mega-menu');
            this.rel+= counter++
        });

        $('div.mega-container').each(function(){
            $(this).attr('id', 'mega-menu');
            this.id+= widgetCounter++
        });

        $('ul.main-nav-list a.mega-list').hover(function(){
            clearTimeout(timeout);
            $('.mega-container').hide().eq($(this).parent().index()).show();
            },
            function(){
            timeout = setTimeout(function(){
                $('.mega-container').hide();
            }, 1000);
        });

        $('div.mega-container').hover(function(){
            clearTimeout(timeout);
            $('.mega-container').hide();
            $(this).show();
            var getValue = $(this).attr('rel');
            var $appliHover = $('ul.main-nav-list a[class=' + getValue + ']');
        alert($appliHover);
            },
            function(){
            timeout = setTimeout(function(){
                $('.mega-container').hide();
            }, 1000);
        });



    });
&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;

&lt;div id="main-nav"&gt;
 &lt;ul class="main-nav-list"&gt;
  &lt;li&gt;&lt;a class="mega-list" href="mysite/index.html"&gt;Mega Nav 1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a class="mega-list" href="mysite/index.html"&gt;Mega Nav 2&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="mysite/index.html"&gt;Mega Nav 3&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="mysite/index.html"&gt;Mega Nav 4&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="mysite/index.html"&gt;Mega Nav 5&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
&lt;/div&gt;

&lt;div class="mega-container"&gt;
 &lt;h1&gt;Mega Container 1&lt;/h1&gt;
 &lt;ul&gt;
&lt;li&gt;&lt;a href="mysite/index.html"&gt;Mega Container Nav&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="mysite/index.html"&gt;Mega Container Nav&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
&lt;/div&gt;

&lt;div class="mega-container"&gt;
 &lt;h1&gt;Mega Container 2&lt;/h1&gt;
 &lt;ul&gt;
&lt;li&gt;&lt;a href="mysite/index.html"&gt;Mega Container Nav&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="mysite/index.html"&gt;Mega Container Nav&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
&lt;/div&gt;

&lt;/body&gt;
</code></pre>
