Search code examples
colorskendo-uikendo-menu

Kendo UI Menu - Change text color of just top level not sub menu's?

I have a menu similar to the following:

---> Sport
    ---> Football
        ---> Players
        ---> Rules
    ---> Cricket
    ---> Baseball
---> Showbiz

And i just want to change the color of just the top level menu items 'Sport' and 'Showbiz'. At the moment I am using:

.k-menu .k-item .k-link{
    color:#FFFFFF !important;
}

But this changes the color of the top level AND 'Football' because it has sub menu's. I don't want 'Football' to change though.

Solution

  • Use the following definition: 

    #menu > li.k-item > span.k-link{
    color:red !important;
}

    Where #menu is the id of the top menu. With this, we limit the scope to the li that are hanging directly from the top list and the to the first links of it.

    See an example here: http://jsfiddle.net/OnaBai/zxpsk8zm/