How to make menu-item of current page appear in a different font color?

Question

Hi,
My menu-bar works just fine. Hovering the links I get the text to take display the desired color. Now I want the menu-item of the selected page to show a third color.
With live-code enabled in Dreamweaver CS6, I can see the following code being generated by the Dynamic menu:
<script type="text/javascript" src="/CatalystScripts/Java_DynMenusSelectedCSS.js"></script><!-- Dynamic Menu Begin CSS Output --><div id="cat_549633_divs"><ul id="nav_549633"><li class="selected"><a href="/home.html">Home</a></li><li><a href="/leistungen.html">Leistungen</a></li><li><a href="/uhrenservice.html">Uhrenservice</a></li><li><a href="/versteigerungen.html">Versteigerungen</a></li><li><a href="/diamanten.html">Diamanten</a></li><li><a href="/ueber_uns.html">Über uns</a></li><li><a href="/kontakt.html">Kontakt</a></li></ul></div><script type="text/javascript">catSetSelectedCSSItem('nav_549633');</script><!-- Dynamic Menu End CSS Output -->
The class .selected is being created in the first list-item (home) as this is the current page.
And here is my CSS:
#nav_549633 {
          float: right;
          list-style-type: none;
          padding-top: 5px;
#nav_549633 li {
          float: left;
          text-align: left;
#nav_549633 li a {
          color:white;
          text-decoration: none;
          margin: 0 27px 0 0;
          font-size: 13px;
          text-transform: uppercase;
#nav_549633 li a:hover {
          color: yellow;
.selected {
          color: green;
The font color green does not appear. It is still white.
In order to see if the class is "working" I tried some other attributes, that DO work!
.selected {
  color: green;
  padding: 20px
  background-color: blue;
In this case, the item appears as a blue box with 20px-padding, just as expected - but the font-color is still white.
Can anyone help me?
Regards,
Herman

Answer 1

Hi Mario,
Here's the link to my site:
http://grootaartseuronics.businesscatalyst.com/index.html
I have found a solution myself for 2 of the 3 questions i had:
I have deleted/changed this div: #nav_1371057 li li
And created a few new ones:
#nav_1371057 li li a, #nav_1371057 li li a:visited (To control the link en visited link colors in the sub-menu other than the root-menu)
#nav_1371057 li li a:hover (to control the hover in the sub-menu other than the root-menu if nessesary)
#nav_1371057 li li.selected a (to control the selected link and let the link change color or bolder like in my case)
Here are the CSS styles I used:
#nav_1371057 li li.selected a { /*Dit veranderd de dikte (bold) van de geselecteerde link in het submenu, dus de pagina waar je bent*/
font-weight:bolder;
#nav_1371057 li li a, #nav_1371057 li li a:visited{
background:  #006;
color:#ffffff;
#nav_1371057 li li a:hover{
background:  #999;
color:#ffffff;
Only thing i can't figure out is how I can change/control the color of the arrow which is black now. And i want to make it blue.
Thanks,
Frank