Styling Top Level Menu Item

[Ian]

I'm new to Kendo UI and struggling to get menus declared using "straight" HTML to work.  However I can get the menus to work if I use code like the following in an MVC view:

   @(Html.Kendo().Menu()
          .Name("Menu")
          .Items(items =>
          {
              items.Add()
                .Text("Menu Option 1")
                .Items(children =>
                    {
                        children.Add().Text("Submenu 1-1")
                                .Items(innerChildren =>
                                    {
                                        innerChildren.Add().Text("Submenu 1-1 Option 1");
                                        innerChildren.Add().Text("Submenu 1-1 Option 2");
                                        innerChildren.Add().Text("Submenu 1-1 Option 3");
                                    });

                        children.Add().Text("Submenu 1-2")
                                .Items(innerChildren =>
                                    {
                                        innerChildren.Add().Text("Submenu 1-2 Option 1");
                                        innerChildren.Add().Text("Submenu 1-2 Option 2");
                                    });
                        children.Add().Text("Submenu 1-3")
                                .Items(innerChildren =>
                                    {
                                        innerChildren.Add().Text("Submenu 1-3 Option 1");
                                        innerChildren.Add().Text("Submenu 1-3 Option 2");
                                    });
                    });
              items.Add()
                .Text("Menu Option 2")
                .Items(children =>
                {
                    children.Add().Text("Submenu 2-1")
                            .Items(innerChildren =>

I'd like to individually style each top level button ("Menu Option 1" and "Menu Option 2") to have a different colour, but cannot see a way to add a CSS style tag to the individual Item (I was hoping for a property similar to "Text" called "Id" or "CssClassId").

In the code example above how could I style "Menu Option 1" to be green, and "Menu Option 2" to be red?

[Dimo]

Hi Ian,

Menu items have a HtmlAttributes() fluent method, which allows you to add inline styles or custom CSS classes.

items.Add().Text("Menu item").HtmlAttributes(new { @class = "myCustomClass", style = "color:red;" });

If there is a color style defined for the Menu item's inner element, the inline style in the Menu configuration may not work, because it is applied to the parent <li> element. In such cases you should apply the item's color with a custom CSS class and a child / descendant selector.

Regards,
Dimo
the Telerik team

[Ian]

Thanks Dimo.

That's exactly what I was looking for.  Can now style the button and text exactly as I'd like. Just need to work out how to do the same for the downward arrow :-)

Ian