[Solved] How to change back color of Kendo UI Menu

[Glen]

I simply want to change the background color of Kendo UI Menu.
Also I want to control the color of each item in the Menu bar.
How can I make it possible? Please help me.

[Dimo]

Hi Glen,

Please review the following example.

http://jsfiddle.net/dimodi/sgW6a/

Regards,
Dimo
Telerik

 

 

[Joel]

Link no longer exists.  Please post your example here.

[Dimo]

Hello Joel,

Here is a snippet, which shows how to modify the styling of the following Kendo UI Menu elements:

- background of the widget
- background and color of an item
- background of an item's hovered state

<style>

#computerMenu {background: yellow;}
#computerMenu .menu-file > .k-link { background: green; color: red; }
#computerMenu .menu-file.k-state-hover > .k-link { background: lightblue; }

</style>

<div id="example">

  <ul id="computerMenu">
    <li class="menu-file">File</li>
    <li>
      Edit
      <ul>
        <li>
          Go To
          <ul>
            <li>Go To All</li>
            <li>Go To File</li>
          </ul>
        </li>
        <li>
          Find and Replace
          <ul>
            <li>Quick Find</li>
            <li>Quick Replace</li>
          </ul>
        </li>
        <li>
          Undo
        </li>
        <li>
          Redo
        </li>
      </ul>
    </li>
  </ul>

  <script>
    $(document).ready(function() {
      $("#computerMenu").kendoMenu();
    });
  </script>
</div>

Regards,
Dimo
Progress Telerik

[Joel]

Thanks, I'll take a look.