CODEWITHSUNDEEP
cssmenu
user2563759
user2563759

Reputation: 5

css whole menu color change on hover

i'm really new to html and css, and i thought having a project while working through tutorials would help me stay motivated while learning a lot.

i've been playing around with this menu, and it's almost there - but now there seems to be this wall and i just don't get how to get over it! i have searched for hours on several sites and 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 change 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..), and 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;
}

Upvotes: 0

Views: 728

Answers (3)

Swarnamayee Mallia
Swarnamayee Mallia

Reputation: 2008

Updated fiddle link is here just changed below

Replace below code

#navigation li a:hover
    color:#08298A;
    text-decoration:none;
}

with

#navigation li:hover a {  
    color:#08298A;
    text-decoration:none;
}

Upvotes: 0

Arun Bertil
Arun Bertil

Reputation: 4648

Try 

li:hover a 
{
    color:yellow;
}

Upvotes: 1

G-Cyrillus
G-Cyrillus

Reputation: 106068

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

li:hover a {color:red}

Upvotes: 1

Related Questions