Question

i have the following menu:

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

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

css:

.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;}

jquery:

$(".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"})

    })

Answer 1

Here is a solution:

Live demo: http://jsfiddle.net/gHc74/

js

$(".menu-vert-01 li, .menu-vert-03 li").click(function(){
$(this).addClass("menu_vert_selected").siblings().removeClass("menu_vert_selected")
})

css

.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-01 li:hover a {color:white}
.menu_vert_selected{background: url('../img/petit-fleche-blanc-menu.png') no-repeat 260px 18px black;}
.menu_vert_selected a {color:white !important}