Page Menu has CSS gradient but no hover state?
 

Please see this test site: http://testsite.marigoldyoga.com

I used Juggledad's colored menu cheat sheet as a starting point and have inserted a css gradient in place of a solid color. I separated the hover state to give it a different appearance, and then put the active state after that. I can't get it to work. Here's my code. Any ideas?

P.S. the gradient code is from a gradient generator I found online.

/* ================================================ */
/* Page menu background */
/* ================================================ */
div#menu1 {
margin-top:0px;
/*background: blue; */
}
/* ================================================ */
/* Page Menu item's background and border */
/* ================================================ */
div#menu1 ul.rMenu {
/*background: red;*/
border: none 0px;
width:100%;
height:40px;
}
/* ================================================ */
/* Page Menu item */
/* ================================================ */
ul.rMenu li a:link,
ul.rMenu li a:visited,
ul.rMenu li {
/*background: yellow !important;
color: #000000 !important;*/
background: #522626; /* Old browsers */
background: -moz-linear-gradient(top, #522626 0%, #663434 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#522626), color-stop(100%,#663434)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #522626 0%,#663434 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #522626 0%,#663434 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #522626 0%,#663434 100%); /* IE10+ */
background: linear-gradient(to bottom, #522626 0%,#663434 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#522626', endColorstr='#663434',GradientType=0 ); /* IE6-9 */
text-align: center;
}

ur.rMenu li a:hover {
color:#522626 !important;
}

ul.rMenu li a:active {
background: #522626; /* Old browsers */
background: -moz-linear-gradient(top, #522626 0%, #663434 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#522626), color-stop(100%,#663434)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #522626 0%,#663434 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #522626 0%,#663434 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #522626 0%,#663434 100%); /* IE10+ */
background: linear-gradient(to bottom, #522626 0%,#663434 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#522626', endColorstr='#663434',GradientType=0 ); /* IE6-9 */
}

/* ++++++++++++++++++++++++++++++++++++++++++++++++++ */

div#menu1 ul.rMenu li a {
padding:0px;
height:40px;
width:138px;
border:none;
}

div#menu1 ul.rMenu li a:link, div#menu1 ul.rMenu li a:hover, div#menu1 ul.rMenu li a:visited, div#menu1 ul.rMenu li a:active {
line-height:2.5em;
}

Remember the "active" state is when the mouse button is held down on a link, NOT the active page.

Thank you for your response. I am aware that active is when the link is being clicked. How does that relate to getting the hover style to work? I don't see a connection between your comment and my question.

I put the active style after the hover style because I had learned that the links styling always goes in that order: link, visited, hover, active. I thought having the active style grouped with link and visited might be preventing the hover style from working. I've actually tried it both ways, and neither get the hover style to work, so I'm still not sure what's going on.

So somthing is getting in the way. Try taking out each piece of css you added one at a time and see if there is any effect, then put in and take out the next bit.

Have you tried putting !important in all the gradient lines? I have had to do that on some sites.

The only reason I mentioned the active state is many get that mixed up with current. I very seldom use it. I usually use just a and a:hover

Take another look at your hover CSS selector.

I ended up swapping the gradient CSS for a gradient image. I still haven't been able to get the hover style to work, even with the image, so I decided to just change the text color on hover instead. If I get the background gradient image to swap on hover I'll let you guys know. Thanks for taking the time to look at it!

Take another look at your hover CSS. It is incorrect unless that is a typo.