Menu Colors

[Joel]

How do I change the background color and the hover color of my Html.Kendo().Menu()?

<div id="responsive-panel">
    @(Html.Kendo().Menu()
          .Orientation(MenuOrientation.Vertical)
          .Name("Menu")
          .Items(items =>
          {
              items.Add().Text("Profile").Url("./Manage"); // else "/Index?handler=redirect"
              items.Add().Text("Password").Url("Manage/ChangePassword");
              items.Add().Text("Two-factor authentication").Url("Manage/TwoFactorAuthentication");
              items.Add().Text("Personal data").Url("Manage/PersonalData");
          })
          )
</div>

 

[Eyup]

Hello Joel,

You can achieve this requirement with CSS rules:

<style>
  /* default state */
  .k-menu .k-item{
    background-color: lightblue;
  }
  /* hovered state */
  .k-menu .k-item .k-state-hover{
    background-color: lime;
  }
  /* parent state */
  .k-menu .k-item .k-state-border-right{
    background-color: white;
    color: black;
  }
</style>

Here is a live dojo sample:
https://dojo.telerik.com/unEMOMug/5

I hope this will prove helpful. If you prefer, I can also prepare an MVC sample and send it to you.

Regards,
Eyup
Progress Telerik