Trying to get the menu to highlight properly

Hi All,

Working on this blog here:
https://www.kgfchurch.org/

Now I’m having a bit of trouble getting the page navigation links to highlight properly in the right places. For example if you click on “Programs” it highlights all the submenu items under that menu. The “About” section does this too. I figured out that this happens because the submenu items are inheriting the CSS from the top level class… so I tried corecting it like so:

.page_item {
background-color:#F7FAF7;
color:#000;
}

.current_page_item {
background-color:#F7FAF7;
color:#000;
text-decoration:underline;
}

.current_page_item .page_item{
background-color:#fff;
color:#000;
text-decoration:none;
}

The problem is that it continues to ignore my definition of text-underline:none for any menu items that appear within the top level current_page_item

Any suggestions as to how this can be fixed so that submenu items will NOT hightlight if their parent element is highlighted?