15 Replies Latest reply on Aug 28, 2012 3:36 PM by mario_gudelj

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

    Ginoem50 Level 1



      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 {


                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?