While it is possible to set the item image using the item's CssClass property (http://www.telerik.com/help/aspnet-ajax/menu-appearance-item-images.html), it would be great to be able to set that directly to the span element with class rmLeftImage. Otherwise, it's necessary to use JavaScript or a CSS pre-processor like LESS to assign font-based images via classes (LESS would be required only to avoid duplicating CSS). The same would apply to just about any control that supports item images, e.g. TreeView.
CSS workaround:
html .RadMenu_Context .rmVertical .rmItem {
clear: both;
}
After clicking the item, the custom class is removed (the color of the item text is changed)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<style>
.TopToolbarAlert, .TopToolbarAlert:link, .TopToolbarAlert:visited, .TopToolbarAlert:hover, .TopToolbarAlert:focus, .TopToolbarAlert:active {
/*background-color: red;*/
color: red !important;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
<div>
<telerik:RadMenu runat="server" ID="toolBarMenu">
<Items>
<telerik:RadMenuItem ID="toolbarAlerts" runat="server" Text="Alerts" />
</Items>
</telerik:RadMenu>
</div>
</form>
</body>
<script type="text/javascript">
$telerik.$(document).ready(function () {
$telerik.$("#toolbarAlerts").addClass("TopToolbarAlert");
});
</script>
</html>
http://docs.telerik.com/devtools/aspnet-ajax/controls/menu/appearance-and-styling/layout-of-child-items
Add the possibility to use radmenu with lava lamp effect. Example: http://www.queness.com/resources/html/lava/index.html