Hi Ivan
Everything looks ok. but ended up with 2 issues.
1. Need different images for different menu.
2. in sub menu and sub-sub menu leaves a black box area if there is no enough menu item ( if there its not multiple of 3) . please see pic attached
Code with latest css is here :
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %><!DOCTYPE html><htmlxmlns="http://www.w3.org/1999/xhtml"><headrunat="server"> <title></title> <style> .demo-container { border: 0; } .demo-container .RadMenu { margin: 0 auto; font-size: 14px; } html .demo-container .RadMenu_Glow .rmRootGroup { position: relative; width: 100%; } html div.RadMenu_Glow .rmItem .rmSlide .rmGroup { background-color : rgba(183, 209, 227, .75); color: white; width: 200px; padding-top:40px; padding-bottom:40px; padding-left:10px; padding-right:10px; } html div.RadMenu_Glow .rmItem .rmSlide .rmFirstGroupColumn .rmLevel1 { background: no-repeat scroll 0 0 rgba(183, 209, 227, .75); background-position:left center; background-repeat: no-repeat; padding-left: 190px; } html div.RadMenu_Glow .rmPopup { background: none repeat scroll 0 0 rgba(50, 82, 204, .75); } .demo-container .RadMenu .rmPopup { width: 300px; } html div.RadMenu_Glow .rmItem .rmSlide .rmLevel2 { background-color: rgba(99, 158, 200, .75); } html .demo-container .RadMenu_Glow .rmHorizontal .rmItem { position: static; } .demo-container .RadSiteMap .rsmColumnWrap { margin-bottom: 0px; } .demo-container .RadSiteMap_Glow .rsmOneLevel .rsmLink, .demo-container .RadSiteMap_Glow .rsmTwoLevels .rsmLevel1 .rsmLink, .demo-container .RadSiteMap_Glow .rsmThreeLevels .rsmLevel2 .rsmLink, .demo-container .RadSiteMap_Glow .rsmManyLevels .rsmLevel3 .rsmLink { font-size: 12px; color: white; } .demo-container .rmPopup .itemContent { padding: 40px 0 40px 90px; background-repeat: no-repeat; background-position: 10px center; } .demo-container .africa { background-position: 70px center; } .demo-container div.RadSiteMap .rsmItem { color: #FFFFFF; list-style-type: square; margin-left: 5px; } .demo-container .rsmColumnWrap { *display: none; } </style> <asp:ContentPlaceHolderID="head"runat="server"></asp:ContentPlaceHolder></head><body> <formid="Form1"runat="server"> <telerik:RadScriptManagerID="RadScriptManager1"runat="server"AsyncPostBackTimeout="600"></telerik:RadScriptManager> <telerik:RadAjaxLoadingPanelID="RadAjaxLoadingPanel"ClientIDMode="Static"runat="server"Skin="Simple"></telerik:RadAjaxLoadingPanel> <telerik:RadAjaxManagerID="RadAjaxManager1"runat="server"DefaultLoadingPanelID="RadAjaxLoadingPanel"></telerik:RadAjaxManager> <divclass="demo-container"> <telerik:RadMenuRenderMode="Lightweight"runat="server"ID="RadMenu1"Skin="Glow"ClickToOpen="false"> <DefaultGroupSettingsHeight="270px"/> <Items> <telerik:RadMenuItemText="Menu Item 2"GroupSettings-OffsetX="0"> <Items> <telerik:RadMenuItemText="Item2"><Items> <telerik:RadMenuItemText="SubItem1"> </telerik:RadMenuItem> <telerik:RadMenuItemText="SubItem2"></telerik:RadMenuItem> <telerik:RadMenuItemText="SubItem3"></telerik:RadMenuItem> <telerik:RadMenuItemText="SubItem4"></telerik:RadMenuItem> <telerik:RadMenuItemText="SubItem5"></telerik:RadMenuItem> <telerik:RadMenuItemText="SubItem6"></telerik:RadMenuItem> </Items></telerik:RadMenuItem> <telerik:RadMenuItemText="Item3"></telerik:RadMenuItem> <telerik:RadMenuItemText="Item4"></telerik:RadMenuItem> <telerik:RadMenuItemText="Item5"></telerik:RadMenuItem> <telerik:RadMenuItemText="Item6"></telerik:RadMenuItem> <telerik:RadMenuItemText="Item7"></telerik:RadMenuItem> <telerik:RadMenuItemText="Item8"></telerik:RadMenuItem> <telerik:RadMenuItemText="Item9"></telerik:RadMenuItem> <telerik:RadMenuItemText="Item1"> <Items> <telerik:RadMenuItemText="SubItem1"> </telerik:RadMenuItem> <telerik:RadMenuItemText="SubItem2"></telerik:RadMenuItem> <telerik:RadMenuItemText="SubItem3"></telerik:RadMenuItem> <telerik:RadMenuItemText="SubItem4"></telerik:RadMenuItem> <telerik:RadMenuItemText="SubItem5"></telerik:RadMenuItem> <telerik:RadMenuItemText="SubItem6"></telerik:RadMenuItem> </Items> </telerik:RadMenuItem> </Items> </telerik:RadMenuItem> <telerik:RadMenuItemText="Menu Item 3"GroupSettings-OffsetX="0"> <Items> <telerik:RadMenuItemText="Item2"><Items> <telerik:RadMenuItemText="SubItem1"> </telerik:RadMenuItem> <telerik:RadMenuItemText="SubItem2"></telerik:RadMenuItem> <telerik:RadMenuItemText="SubItem3"></telerik:RadMenuItem> <telerik:RadMenuItemText="SubItem4"></telerik:RadMenuItem> </Items></telerik:RadMenuItem> <telerik:RadMenuItemText="Item3"></telerik:RadMenuItem> <telerik:RadMenuItemText="Item4"></telerik:RadMenuItem> <telerik:RadMenuItemText="Item5"></telerik:RadMenuItem> <telerik:RadMenuItemText="Item6"></telerik:RadMenuItem> <telerik:RadMenuItemText="Item7"></telerik:RadMenuItem> <telerik:RadMenuItemText="Item8"></telerik:RadMenuItem> </Items> </telerik:RadMenuItem> <telerik:RadMenuItemText="Menu Item 4"GroupSettings-OffsetX="0"> <Items> <telerik:RadMenuItemText="Item2"><Items> <telerik:RadMenuItemText="SubItem1"> </telerik:RadMenuItem> <telerik:RadMenuItemText="SubItem2"></telerik:RadMenuItem> <telerik:RadMenuItemText="SubItem3"></telerik:RadMenuItem> <telerik:RadMenuItemText="SubItem4"></telerik:RadMenuItem> <telerik:RadMenuItemText="SubItem5"></telerik:RadMenuItem> <telerik:RadMenuItemText="SubItem6"></telerik:RadMenuItem> </Items></telerik:RadMenuItem> <telerik:RadMenuItemText="Item3"></telerik:RadMenuItem> <telerik:RadMenuItemText="Item4"></telerik:RadMenuItem> <telerik:RadMenuItemText="Item5"></telerik:RadMenuItem> <telerik:RadMenuItemText="Item6"></telerik:RadMenuItem> <telerik:RadMenuItemText="Item7"></telerik:RadMenuItem> <telerik:RadMenuItemText="Item8"></telerik:RadMenuItem> <telerik:RadMenuItemText="Item9"></telerik:RadMenuItem> <telerik:RadMenuItemText="Item1"> <Items> <telerik:RadMenuItemText="SubItem1"> </telerik:RadMenuItem> <telerik:RadMenuItemText="SubItem2"></telerik:RadMenuItem> <telerik:RadMenuItemText="SubItem3"></telerik:RadMenuItem> <telerik:RadMenuItemText="SubItem4"></telerik:RadMenuItem> <telerik:RadMenuItemText="SubItem5"></telerik:RadMenuItem> <telerik:RadMenuItemText="SubItem6"></telerik:RadMenuItem> </Items> </telerik:RadMenuItem> </Items> </telerik:RadMenuItem> </Items> <DefaultGroupSettingsRepeatColumns="3"RepeatDirection="Vertical"/></telerik:RadMenu> </div> <asp:ContentPlaceHolderID="ContentPlaceHolder1"runat="server"></asp:ContentPlaceHolder> </form></body></html>