Kendo Menu Bug
When a sub menu opens it adds k-state-border-right class, but doesn't remove it when the menu closes like it does for k-state-border-down. Compare the green highlight when menu opens and see how the highlight remains in the help sub menu.
by pmamode
HTML
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>
<body>
<ul id="nav_menuUl">
<li> <a id="nav_hHdr">Help</a>
<ul>
<li> <a id="nav_hPf">Preferences</a>
</li>
<li> <a id="nav_hFb">Send Feedback</a>
</li>
<li> <a id="nav_hMd">Supported Mobile Devices</a>
</li>
<li> <a id="nav_hAbb">Help With Field Abbreviations</a>
</li>
<li> <a id="nav_hUgHdr">Mobile Device User Guides</a>
<ul>
<li> <a id="nav_hUgiOS">iPhone</a>
</li>
<li> <a id="nav_hUgBb">BlackBerry</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
CSS
.k-menu, .k-menu .k-item {
background-image: none;
background-color: #424242;
margin: 0;
padding: 0;
border: none;
font-size: 12px;
}
.k-menu .k-link {
text-decoration: none;
color: #d8d542;
cursor: pointer;
}
.k-menu .k-link:hover {
color: #f2ef4b;
}
.k-menu .k-state-hover, .k-menu .k-state-border-down, .k-menu .k-state-border-right {
background-color: green;
}
JavaScript
/******
Shows bug with kendo menu:
When a sub menu opens it adds k-state-border-right class, but doesn't remove it when the menu closes like it does for k-state-border-down for the top level menus. Compare the green highlight when menu items open they sub-menus. See how the highlight remains in the help sub-menu Mobile Device User Guide.
******/
$(document).ready(function () {
$("#nav_menuUl").kendoMenu().show();
});