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

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

    Ginoem50 Community Member

      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