Gradient menu bar using Juggledad's cheat sheet

Blessings4all · #1 Feb 5, 2013, 05:37 PM

I would like to have a page menu bar with a purple to white gradient and a pink to white gradient for the hover/active tab. I created a gradient purple image to be repeated. I added Juggledad's cheat sheet to CSS Inserts and modified it as you see below. This is my website.

I have 2 questions:

1. Why does the gradient only work on the home page? If I go to any other page or post, it reverts to my other menu bar.

2. Where and how do I add the image for the pink gradient that will be used for the hover/active tab?

Thanks so much in advance.

Quote:

/* ================================================ */
/* Page menu background */
/* ================================================ */
div#menu1 {
height: 40px;
margin-top:0px;
background: white;
}
/* ================================================ */
/* Page Menu item's background and border */
/* ================================================ */
div#menu1 ul.rMenu {
background-image:url(wp-content/uploads/2013/02/WHPurpleMenu.jpg) !important;
background-repeat:repeat-x !important;
border: none 0px;
}
/* ================================================ */
/* Page Menu item */
/* ================================================ */
ul.rMenu li a:link,
ul.rMenu li a:visited,
ul.rMenu li a:hover,
ul.rMenu li a:active,
ul.rMenu li {
background-image:url(wp-content/uploads/2013/02/WHPurpleMenu.jpg) !important;
background-repeat:repeat-x !important;
}
/* ================================================ */
/* Category menu background */
/* ================================================ */
div#menu2 {
height: 40px;
margin-top:0px;
background: green;
}
/* ================================================ */
/* Category Menu item's background and border */
/* ================================================ */
div#menu2 ul.rMenu {
background: orange;
border: none 0px;
}
/* ================================================== */
/* Category Menu item */
/* ================================================== */
#menu2 ul.rMenu li a:link,
#menu2 ul.rMenu li a:visited,
#menu2 ul.rMenu li a:hover,
#menu2 ul.rMenu li a:active,
#menu2 ul.rMenu li {
background: purple !important;
color: #000000 !important;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++ */