CODEWITHSUNDEEP
css
KodeFor.Me
KodeFor.Me

Reputation: 13511

CSS Sub menu on hover change color on sub-sub-menu elements

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

Upvotes: 0

Views: 6472

Answers (2)

Morteza
Morteza

Reputation: 2428

Add CSS:

#main_nav li ul li:hover
{
    background-color: Red;
}

Upvotes: 1

M Rostami
M Rostami

Reputation: 4195

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

Upvotes: 3

Related Questions