This is a migrated thread and some comments may be shown as answers.

Text colour on menu items and sub menu items

1 Answer 506 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Ryan
Top achievements
Rank 1
Ryan asked on 03 Dec 2012, 11:41 PM
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

1 Answer, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 05 Dec 2012, 01:07 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Menu
Asked by
Ryan
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Share this question
or