active menus not working, losing css hover
<p>i have the following menu:</p>

<pre><code>&lt;ul class="menu menu-vert-01"&gt;
&lt;!--start--&gt;
&lt;li&gt;&lt;a href="#Semantic-Technologies"&gt;Semantic Technologies&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#Business-Intelligence-Solutions"&gt;Business Intelligence Solutions&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#Social-&amp;-Collaboration"&gt;Social &amp; Collaboration&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#Mobile-Technologies"&gt;Mobile Technologies&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#Content-&amp;-Data"&gt;Content &amp; Data&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#Virtual-Production"&gt;Virtual Production&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#Similarity"&gt;Similarity&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#Human-Research"&gt;Human Research&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>when the menu is hovered a css class makes the  go white
im using jquery to highlight the selected menu when a item is clicked the color goes white(the  color) the problem is i lose the css hover</p>

<p>css:</p>

<pre><code>.menu li a:hover{ color: white; } 

.menu-vert-01 li a{ color: black;font-family: "TitilliumText14LRegular"}
.menu-vert-01 li:hover{background: url('../img/petit-fleche-blanc-menu.png') no-repeat 260px 18px black; }

.menu_vert_selected{background: url('../img/petit-fleche-blanc-menu.png') no-repeat 260px 18px black;}
</code></pre>

<p>jquery:</p>

<pre><code>$(".menu-vert-01 li, .menu-vert-03 li").click(function(){
           $(this).addClass("menu_vert_selected").siblings().removeClass("menu_vert_selected")
           $(this).children().css({color: "white"}).parent('li').siblings().children().css({color: "black"})

    })
</code></pre>
