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>