css menu - active main menu item

I am using a CSS menu that is provided by the WPML package.

I would like to have the active main-menu-item to stay blue when it is active.

what I have done in the past is apply the color to .li selected_page

the problem is that all the sub-menu items also have this tag applied, which means that in most browsers (strangely not the current firefox) whenever it is active all the menu items including the sub-menu items are blue.

Does anyone see a way to apply the blue color to the active main menu item so that it stays blue when it has been clicked? Thanks!

-EDIT- after all the help: as usually the solution is a sum-total of all of your help :) I finally made it by using the following code:

#menu-wrap li.开发者_运维问答selected_page a { color: #1983AF; } 
#menu-wrap ul li.selected_page ul>li>a { color: #000; }
#menu-wrap ul li.selected_page ul>li>a:hover { color: #1983AF};

Try the ">" CSS selector, something like "#cms-nav-top-menu > li.selected_page {color: blue;}"

However, this won't work in old browsers.

See http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/

I think the problem is inheritance - your style

#menu-wrap li.selected_page {
    color: #1983AF;
}

is being overwritten by

#menu-wrap ul a {
    color: #333333;
}

Try updating the first example to read:

#menu-wrap ul li.selected_page a {
    color: #1983AF;
}

That should force it to take precedence in the CSS. Hope this helps! Best of luck.

EDIT BASED ON COMMENT:

To get the sub-items not appearing in blue, add this - changing #000 to whatever color you wish:

#menu-wrap ul li.selected_page a ul a {
    color: #000;
}

And if you want a different color for selected sub-items, just add the color to this selector (already in your stylesheet):

#menu-wrap li.selected_subpage

Best of luck!

li.selected_page a:first-child
{
    color:#1983AF;
}

CSS2