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;
}