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!

CSS:

#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/

li:hover a {color:red}