CSS HELP!

how can i get the menu navigation links to turn yellow on hover?

here's my css for the navigation menu...

.menu {
position: relative;
display: inline-block;
margin-top: 128px;
}
#menu>li {
display: inline-block;
position: relative;
width: 230px;
height: 53px;
margin-top: -13px;
background: url(../images/menu_div.png) center 42px no-repeat;
}
#menu>li.no_disp {
display: none;
}
#menu>li>a {
position: relative;
display: block;
font: 21px/24px 'Century Gothic', serif;
color: #78685e;
text-transform: uppercase;
margin: 12px 0;
z-index: 20;
}
#menu>li>strong{
display: inline-block;
position:absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
z-index: 10;
background: url(../images/menu_bg.png) center no-repeat;
height: 0;
}


PLEASE HELP! thanks!

 

Are you talking about a href links? If so, you can use the following:

a:hover {color:yellow;}

or

a:hover {background-color:yellow;}

The first one changes the color of the actual text, the second changes the colour of the background around the text.

Hope that helps.

 

jeff..where do i put this? #menu>li a:hover {color:#f8f83c;}

 

You will put it in your style.css
If you can send your url, I can find its exact way.

 

i know it's suppose to go inside the style.css but not sure where in there. thanks alkantenik

 

Have it follow this bit, like so:

#menu>li>a {
  position: relative;
  display: block;
  font: 21px/24px 'Century Gothic', serif;
  color: #78685e;
  text-transform: uppercase;
  margin: 12px 0;
  z-index: 20;    /*If you need this, you probably screwed something up*/
}
 
#menu>li a:hover {
  color:#f8f83c;
  }

Code (markup):

cheers,

gary

 

kk...i can't believe that your code is not working. i've tried just about everything and it's not working

 

Try

   
#menu>li>a:hover {
      color:#f8f83c;
      }

Code (markup):

 

thanks try..it's not working though...there's something about this html theme.

 

You have to send your website url Drew.
You can send PM.

 

actually i got it to work here...thanks alk!

#menu>li>a:hover, #menu a:hover, #menu>li>a:active, #menu a:active {
color: #a91e28 !important ;
}

 

The fact that you had to put !important there means that it most likely is already being defined somewhere else in your code. Are you using a template? You might want to check and see if there are any website-general a:hover codes near the beginning of your code that may have been overriding your changes.

 

you ask href link ??

 

#menu li a:hover {color:yellow}
you can use hex code to replace color name.

 

go to htmlgenerators.com and download the freeware.

 

I'd use FIREBUG to inspect and see if the code is being overridden.

 

menu>>li>>a:hover{ color:Yellow;} (Text color will be yellow when you hover)
menu>>li>>a:hover{ background color:Yellow;} (background color for that particular tab will be yellow when you hover)

 

That is invalid syntax. You should validate and test any code or markup before posting something that will lead others wrong. If you disagree that it is invalid, please post the relevant reference to the specs.