@(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?