Question

I try to create a CSS based menu for my web site, with some code from lwis.net (I use a small snippet only)

The menu code is here : http://jsfiddle.net/hCwZ2/

What I like to do, is on hover at the sub level menu items to change the color to black. But what I have done, is when I hover the sub element to make black the elements of the sub-sub-elemetns too.

How can I make black only the item on witch the mouse is hover it ?

IE:

On Services > Web Design:hover things are fine.
On Services > Print Design:hover things are wrong because the Services > Print Design > Busines Card and Services > Print Design > Flyer are black too.

I need them in black, only on hover each one seperatly.

NOTE : I need only the items of the sub menus to change color on hover. The top level items must be white on hover.

Kind regards
Merianos Nikos

Answer 1

you should set hover on “li a” element or define a class for sub-menu li element:

replace this :

#main_nav li:hover > ul li:hover a
 {
   color:#000;
 }

with this one

#main_nav li > ul li a:hover
 {
   color:#000;
 }