/ css whole menu color change on hover

css whole menu color change on hover

i’m really new to html & css, & i thought having a project while working through tutorials would assist me stay motivated while learning a lot.

i’ve been playing around with this menu, & it’s almost there – yet now there seems to be this wall & i just don’t obtain how to obtain over it! i have searched for hours on several sites & am now ready to throw this thing outta the window…

here’s a jsfiddle: http://jsfiddle.net/64Grv/

so what i wanted to achieve is that on hover of one submenu the whole menu changes color (instead of the hovered link now). if i hover on “more stuff” for example, all of “menupoint2, stuff, more stuff, even more stuff….” should alter color.

how should i go with that? i’ve tried putting different classes, to no avail – i guess i put them at the wrong place. or is this possible with some kind of box?

i apologize for the messiness of my css (just a beginner messing around..), & i’d really appreciate it if somebody had concrete tips on how to do this 🙂

thank you very much!


navigation ul { margin:0px; padding:0px; position:relative; text-align:center; } #navigation ul li { display:inline; float:right; line-height:20px; list-style:none; margin-right:3%; margin-top:5%; position:relative; } #navigation li a { display:block; font-family: "Helvetica", "Arial", sans-serif; font-size:1em; color:#04B4AE; text-decoration:none; } #navigation li a:hover { color:#08298A; text-decoration:none; } #navigation li ul { font-size:0.8em; background-color:transparent; display:block; margin:0px; padding:0px; top:0.5em; } #navigation li:hover ul { color:#04B4AE; } #navigation li li { vertical-align:middle; list-style:none; display:list-item; margin:auto; float:none; } #navigation li li a { color:#04B4AE; text-decoration:none; } #navigation li li a:hover { color:#08298A; text-decoration:none; }

you need to set :hover on li : [http://jsfiddle.net/64Grv/1/](http://jsfiddle.net/64Grv/1/)

li:hover a {color:red}