color of the <li> change in on mouse over and click event using jquery
<p>I want to change the color of the li as red on mouse over. And keep the same color in click event also. I have the following list,</p>

<pre><code>&lt;html&gt;
  &lt;body&gt;
     &lt;ul&gt;
        &lt;li&gt;list1&lt;/li&gt;
        &lt;li&gt;list2
            &lt;ul&gt;
               &lt;li&gt;sublist1&lt;/li&gt;
               &lt;li&gt;sublist2&lt;/li&gt;
               &lt;li&gt;sublist3&lt;/li&gt;
               &lt;li&gt;sublist4&lt;/li&gt;
            &lt;/ul&gt;
         &lt;/li&gt;
         &lt;li&gt;list3&lt;/li&gt;
         &lt;li&gt;list4&lt;/li&gt;
     &lt;/ul&gt;
  &lt;/body&gt;
&lt;/html&gt;




list1
list2
  sublist1
  sublist2
  sublist3
  sublist4
list3
list4
</code></pre>

<p>If i click the list1, it color should be change into red, at the same time if i mouse over the other list it will be displayed as red. Its default color is black.</p>
