change the active menu color on mouse over and click event using jquery
<pre><code>&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;menu&lt;/title&gt;
        &lt;style&gt;
            .highlight, .highlight_stay {
                color:red;
            }
        &lt;/style&gt;
        &lt;script type="text/javascript" src="jquery-1.7.min.js"&gt;&lt;/script&gt;
        &lt;script type="text/javascript"&gt;
            $(function() {
                $('li a').hover(function() {
                    $(this).addClass('highlight');
                }, function() {
                    $(this).removeClass('highlight');
                });
                $('li a').click(function() {
                    $(this).addClass('highlight_stay');
                });
            });
        &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;ul&gt;
            &lt;li&gt;&lt;a href="#" style="text-decoration:none;"&gt;list1&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a href="#" style="text-decoration:none;"&gt;list2&lt;/a&gt;
                &lt;ul&gt;
                    &lt;li&gt;&lt;a href="#" style="text-decoration:none;"&gt;sublist1&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;&lt;a href="#" style="text-decoration:none;"&gt;sublist2&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;&lt;a href="#" style="text-decoration:none;"&gt;sublist3&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;&lt;a href="#" style="text-decoration:none;"&gt;sublist4&lt;/a&gt;
                    &lt;/li&gt;
                &lt;/ul&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a href="#" style="text-decoration:none;"&gt;list3&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a href="#" style="text-decoration:none;"&gt;list4&lt;/a&gt;
            &lt;/li&gt;
        &lt;/ul&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>Its changing all the lists into red color. But, I want the following requirement.</p>

<p>The first time I click, <code>list1</code>, it changes into red color. If I click <code>list2</code> at 2nd time, <code>list1</code> will change to its original color and <code>list2</code> will be in red color. Like wise it want to work. At the same time on mouse over also want to activate the list as red color.</p>

<p>Any one can help? Please!</p>
