0

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.

Simmy Dhanda
  • 139
  • 1
  • 4
  • 13

1 Answers1

0

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/

OnaBai
  • 40,767
  • 6
  • 96
  • 125
  • Thank you so much, that really helped however, one issue. Can you try and swap the position of both 'Sports' and 'Showbiz' because I just tried that (for sorting purposes) and the first menu option 'Showbiz' doesn't change color. – Simmy Dhanda Aug 21 '14 at 10:55