New to Kendo UI for jQuery? Download free 30-day trial

Style Hovered Menu Item with CSS

Environment

Product Progress® Kendo UI® Menu for jQuery
Product Version 2018.2.620

Description

How can I change the background color of a Kendo UI Menu item when a user hovers over it?

Solution

Setting a different background color for a Kendo UI Menu item can be achieved using CSS:

  /*specific menu*/
  #specificMenu.k-menu .k-hover>.k-link{
    background-color: lightgray;
  }

  /*all menus*/
  .k-menu .k-hover>.k-link{
    color: forestgreen;
    background-color: khaki;
  }

The following demonstrates two Kendo UI Menus with different styles for hovered items:

    <style>
      /*specific menu*/
      #computerMenu.k-menu .k-hover>.k-link{
        background-color: pink;
      }

      /*all menus*/
      .k-menu .k-hover>.k-link{
        color: forestgreen;
        background-color: khaki;
      }
    </style>

    <div id="example">

      <ul id="computerMenu">
        <li>
          File
          <ul>
            <li>
              New
              <ul>
                <li>Project</li>
                <li>File</li>
              </ul>
            </li>
            <li>
              Open
              <ul>
                <li>Project</li>
                <li>File</li>
              </ul>
            </li>
            <li>
              Exit
            </li>
          </ul>
        </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>

      <br />
      <br />

      <ul id="smallMenu">
        <li>
          One
          <ul>
            <li>
              A
              <ul>
                <li>A1</li>
                <li>A2</li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
      <script>
        $(document).ready(function() {
          $("#computerMenu").kendoMenu();
          $("#smallMenu").kendoMenu();
        });
      </script>
    </div>

See Also

In this article