Text colour on menu items and sub menu items

[Ryan]

Hi,

I am looking to change the colour of the text in menu items and sub menu items.  I am wanting the colour to be different.  I can change the color on all menu items, or menu items without a link to a page - href.  But I have not found a way to change the colour so the top level menu items are different to the sub menu items.

html is:

<ul id="menu">

    <li><a>menuitem1</a></li>

    <li><a href="">menuitem2</a></li>

    <li><a>menuitem3</a>

        <ul>

            <li><a href="">menuitem3a</a></li>

            <li><a href="">menuitem3b</a></li>

        </ul>

    </li>   

</ul>

The code below only gets applied on menu items without href.

.k-menu

{

    /* White - only applied on menu items without href */

    color:#ffffff;

}

Then this code applies to all menus items (I did not want the sub menus to have the same colour).

/* Applied to all links - but only want top level menu items*/

.k-menu .k-item .k-link

{

    color:#ffffff; /*White*/

}

Code is also on jsfiddle:
http://jsfiddle.net/PgXSZ/

Looking at the forums someone suggested

.k-menu  .k-group

{

         /*    ..........     */

}

But I cannot get this to work.

Thanks,
Ryan

[Iliana Dyankova]

Hello Ryan,

In order to achieve the desired outcome you need to increase the CSS specificity of the sub menu items. For example: 

.k-menu .k-popup .k-item .k-link{
    color: red;
}

For more detailed information about CSS specificity, check out this online article.

Regards,
Iliana Nikolova
the Telerik team