Navigation and Sub-menu Navigation with CSS via a Wordpress site - css

Question

I apologize if this post makes little to no sense, I'm very, very new to CSS, additionally some of the terminology is new to me and I'm not entirely certain I'm using it correctly.
I'm helping to tweak a pre-existing website that was created for Wordpress. (www.teloscares.org). Here's the problem that I'm having (As a side note, I use (for example) which means that I'm currently on that page. What I'm attempting to do is describe my problem by way of explaining what pages I'm on, etc.):
The "nav-bar" is the Cyan colored strip up on top with 5 items, Home, Benefits, Get Involved, Donate and About Us. While on the home page (for example) you notice that "Home" is surrounded by a yellow box. If you hover over "Benefits" (for example) you see that there's a sub-menu, with the light/dark grey boxes. Now, when you CLICK on the Benefits page in order to Navigate to it, "Benefits" now becomes your active page and the Navigation bar now has a yellow box instead of grey.
The PROBLEM I'm having is that while the "Benefits" box is meant to be yellow, the sub-menu items also appear yellow, and I want them to retain their grey.
When I navigate to a sub-menu page, it displays correctly with ONLY the active page being yellow.
How do I make it so that when the active page is a MAIN page on the nav-bar, the sub-menu boxes do not also appear yellow?
If need be, I'm willing to post any/all of the style.css file. Thank you very much for your help with this matter. I've been trying to find a solution on google with little luck.
-Josh

Answer 1

Here is the code causing the problem, its line 1331 of your stylesheet.
/* Removing this ALSO seemed to remove the yellow Block.
Changing the color property changed the text WITHIN the yellow block, but not
the color of the yellow block itself. Hm..... -Josh */
.main-header .navigation ul li.current_page_item a {
color: #000; /* was 000 */
/* Taking out THIS line removes the yellow block, but from both the main and sub-pages. -Josh */
background: url('images/bg_header.png') repeat-x left top;
}
Change it to this and voila :)
.current-menu-item {
color: #000; /* was 000 */
background: url('images/bg_header.png') repeat-x left top;
}
Your selector before, ul li.current_page_item a selects ALL the links that are within the li.current_page_item. We just want the top, and WordpPress uses .current-menu-item class.

Answer 2

This is happening because you apply the background image to all 'a' inside the 'li'. You should apply this instead:
.main-header .navigation ul li.current_page_item > a { .. }