It's close, and thanks JD for the inclusion of the UL, I was stuck looking at the class. Here's my code:

ul.rMenu li.current-menu-parent ul li a:link
{color: #204572 !important;}
ul.rMenu li.current-menu-parent ul li a:active
{color: #fff !important;}
ul.rMenu li.current-menu-parent ul li a:hover
{color: #DC2509 !important;}
ul.rMenu li.current-menu-parent ul li a:visited
{color: #204572 !important;}

It's halfway there. You can look at http://www.ddubcustomsportswear.com/?page_id=25 (remember the splash page bypass at the bottom) and see that the red hover is working EXCEPT on the first three items. The main links are now blue, which is good, but the active is not turning white.

So it should be:

Link & visited: Blue
Active: White
Hover: Red

Am I just not seeing a typo here?

FireBug shows me you need

div#menu1 ul.rMenu li.current-menu-item a:link, div#menu1 ul.rMenu li.current-menu-item a:active, div#menu1 ul.rMenu li.current-menu-item a:hover, div#menu1 ul.rMenu li.current-menu-item a:visited, div#menu1 ul.rMenu li.current_page_item a:link, div#menu1 ul.rMenu li.current_page_item a:active, div#menu1 ul.rMenu li.current_page_item a:hover, div#menu1 ul.rMenu li.current_page_item a:visited, div#menu1 ul.rMenu li a:hover {
    color: red;
}

This continues to frustrate me. I've got it now where it has:

CORRECT:
Parent item (white on current)
Inactive child links (blue)
Hover child links (red)

INCORRECT:
Active child page -- blue, should be white

I went to Firebug instead of Chrome Element. They're formatted a little differently, so they could be displaying the same info. In any case, I searched for the blue code #204572. This is what I see:

ul.rMenu li.current-menu-parent ul li a:active {
    color: #FFFFFF !important;
}

ul.rMenu li.current-menu-parent ul li a:link, ul.rMenu li.current-menu-parent ul li a:visited {
    color: #204572 !important;
}

I think the Blue for link/visited is overriding the white for active. When I put them at equal importance, it shows that the blue wins out. If I swap the order of them, it shows up as whichever comes latest. If I remove the important from either one, the one marked important shows up on all elements except hover.

Makes sense to me from the way CSS is structured, but is there a way to get the Active Child page to show up as a different color from the links/visited links/hover?

Anyone? Or should I wave the white flag on this?

The brute force way would be to add the following in CSS Inserts.

div#menu1 ul.rMenu li.current-menu-item a:link, div#menu1 ul.rMenu li.current-menu-item a:active, div#menu1 ul.rMenu li.current-menu-item a:hover, div#menu1 ul.rMenu li.current-menu-item a:visited, div#menu1 ul.rMenu li.current_page_item a:link, div#menu1 ul.rMenu li.current_page_item a:active, div#menu1 ul.rMenu li.current_page_item a:hover, div#menu1 ul.rMenu li.current_page_item a:visited, div#menu1 ul.rMenu li a:hover {
    color: #fff !important;
}

Also I can barely read your menu items on my laptop... Not great for usability.

Close but no cigar. This creates a white hover state instead of the red. I tried removing the hover elements and that just created the scenario I previously described.

I think I'm giving up on this one. Any recommendations on a CSS-friendly menu plugin?

Re: color scheme...it's what the site owner wanted. I originally designed it as a light gray but he wanted the blue to go with the logo. Sometimes you can explain and explain but they're hell-bent on their decisions!

Did you try taking out the hover code? You may have to play with this code a bit.

Yeah, I tried removing the hover elements. Tried also overriding them with different placement in the inserts, and a few other variations but it ultimately reproduced the same effects that I got before.

I'll try going the other route with a plugin, so recommendations are welcome.

This worked for me

div#menu1 ul.rMenu li.current-menu-item a:link, div#menu1 ul.rMenu li.current-menu-item a:active, div#menu1 ul.rMenu li.current-menu-item a:visited, div#menu1 ul.rMenu li.current_page_item a:link, div#menu1 ul.rMenu li.current_page_item a:active, div#menu1 ul.rMenu li.current_page_item a:visited {
color: #ffffff !important;
}

I tried it I think the issue here stems from the use of the Parent code (earlier in the thread):

/* ================================================ */
/* how to highlight parent of current page          */
/* ================================================ */
ul.rMenu li.current-menu-parent a:link, 
ul.rMenu li.current-menu-parent a:active, 
ul.rMenu li.current-menu-parent a:hover, 
ul.rMenu li.current-menu-parent a:visited, 
ul.rMenu li.current-menu-parent {
color: #fff !important;
}

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

If I put in your code WITH this code, then the result turns everything white. I think it supersedes the CSS defaults (blue links, red hover). That's what I have saved right now, you can check it out.

If, however, I remove the parent code, then everything fits into place EXCEPT the parent item. For example, the active child is white, the other child links are blue, the hover links are red. It's essentially the CSS default.

My original configuration had the Parent code (above) and the following three items that I have currently removed:

1) Blue colors on links:
ul.rMenu li.current-menu-parent ul li a:link, ul.rMenu li.current-menu-parent ul li a:visited
{color: #204572 !important;}

2) White on active link (NOT WORKING)
ul.rMenu li.current-menu-parent ul li a:active
{color: #fff;}

3) Red on hover:
ul.rMenu li.current-menu-parent ul li a:hover
{color: #DC2509 !important;}

The final variation I tried was the Parent code + your code except I altered the parent code to get rid of the link, hover, and visited states. This failed to activate the Parent as white.

So maybe instead of the code I just gave you perhaps the following.

div#menu1 ul.rMenu li.current_page_item a {
color: #fff !important;
}

This is where I play with Firebug to determine what works. There is somtimes so much CSS interaction it is next to impossible to give you the exact code.

THAT DID IT!!!

Or, more specifically, this combination of code:

1) Parent menu code:

ul.rMenu li.current-menu-parent a:link, 
ul.rMenu li.current-menu-parent a:active, 
ul.rMenu li.current-menu-parent a:hover, 
ul.rMenu li.current-menu-parent a:visited, 
ul.rMenu li.current-menu-parent {
color: #fff !important;
}

2) Child menu code:

ul.rMenu li.current-menu-parent ul li a:link, ul.rMenu li.current-menu-parent ul li a:visited
{color: #204572 !important;}
ul.rMenu li.current-menu-parent ul li a:active
{color: #fff;}
ul.rMenu li.current-menu-parent ul li a:hover
{color: #DC2509 !important;}

3) Active child menu code:

div#menu1 ul.rMenu li.current_page_item a {
color: #fff !important;
}

You've earned my donation for the day!

I used the code above to highlight the parent menu when on a child page, and it worked except when I try to make the background gradient. The text still changes but not the background. This is the CSS i used in the CSS Insert section.

/* how to highlight parent of current page * * * * **/
/* ================================================ */
div#menu1 ul.rMenu li.current_page_parent a:visited {
background: -webkit-gradient(linear, left top, left bottom, from(#6D86BC), to(#D5DDEC)) !important;
background: -moz-linear-gradient(top,  #6D86BC,  #D5DDEC) !important;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6D86BC', endColorstr='#D5DDEC') !important;
color: #ffffff !important;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* Adjustments for the menu bars, which in their default 
state have 1px borders plus -1px margins to avoid 1+1=2px 
borders between neighbor items. */
ul.rMenu-hor ul, ul.rMenu-hRight ul { margin-top: 0px; background: transparent;}
ul.rMenu-hor li { margin-bottom: 0px; margin-top: 0px; margin-left: 0px; background: transparent; }
ul.rMenu-hor { padding-left: 0px; background: transparent; }
ul.rMenu-ver li { margin-top: 0xp; background: transparent; }

div#menu1 ul.rMenu li a, div#menu2 ul.rMenu li a {
padding: 9px 11px 6px 11px;
background:-webkit-gradient(linear, left top, left bottom, from(#D5DDEC), to(#ffffff)); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#D5DDEC', endColorstr='#ffffff');
background: -moz-linear-gradient(top,  #D5DDEC,  #ffffff); 
-webkit-box-shadow: rgba(0,0,0,0.55) 0px 1px 1px; -moz-box-shadow: rgba(0,0,0,0.35) 0px 1px 1px;
-moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;
}

I use the latest Wordpress and Atahualpa.
Any suggestions?

I would double check your gradient CSS. That can be a bit finicky. For instance I have never seen from and to in CSS. Where did you get this code?

Thanks for your quick response. I found it on this site http://webdesignerwall.com/tutorials...r-css-gradient. The strange thing is that the code works in default stage but not in current stage.

I would double check your selectors. How about this one?

.current_page_item a

Tried to change the selector to your suggestion, but it did not work either. When I did that not even the text changed. So I guess the selector is correct since it at least changes the text. This is the site I am working on. This is one of the child pages http://frontline-leadership.com/wordpress/?page_id=122. I really appreciate all your help.

Try changing

/* ================================================ */
/* how to highlight parent of current page          */
/* ================================================ */
div#menu1 ul.rMenu li.current_page_parent a:visited {

to

/* ================================================ */
/* how to highlight parent of current page          */
/* ================================================ */
div#menu1 ul.rMenu li.current_page_parent  {

Tried that Juggledad, but again then the white text disappears as well. So it looks like the selector does not work when I do that. The strange thing is that the gradient works for the default stage but not for the current page.

Without spending a bit of time to narrow this down you could "brute force" the color for the current menu item by using the following and changing the color to what you want for current and hover states.

div#menu1 ul.rMenu li.current-menu-item a:link, div#menu1 ul.rMenu li.current-menu-item a:active, div#menu1 ul.rMenu li.current-menu-item a:hover, div#menu1 ul.rMenu li.current-menu-item a:visited, div#menu1 ul.rMenu li.current_page_item a:link, div#menu1 ul.rMenu li.current_page_item a:active, div#menu1 ul.rMenu li.current_page_item a:hover, div#menu1 ul.rMenu li.current_page_item a:visited, div#menu1 ul.rMenu li a:hover {
    color: red !important;
}

lmilesw it worked so far as that the current page has the right darker gradient background I want in the menu, but not when I am on the child page. Before the background did not work for childpages in the menu, but the text. Now it does not indicate in the menu at all what the prarent is. Any idea?

I got it to work. When I added div#menu1 ul.rMenu li.current_page_parent a:visited, to the code you gave me and it worked.