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.

/* ================================================ */
/* 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;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++ */

the url you are using to point to the image is not proper when you go to other pages. change it from

wp-content/uploads/2013/02/WHPurpleMenu.jpg

to

/wp-content/uploads/2013/02/WHPurpleMenu.jpg

Thanks so much. That took care of problem number 1. Now where do I put the code for the pink graphic if I want the active page and the hover to be pink?

I suggest you take a look at this writeup about psuedo classes and then explain how you think you have to do it - yes it is test time

Ah ha! The lightbulb goes on. Thanks so much. Now I can place things where I want.