Hi I can able to achieve the layout i want, but only issue is that offsetting the sub menu in the wrong position. Please see the output Iam getting marked as wrong in picture attached and output i want as marked with tick mark in picture. Also attached CSS and menu item code in master page "MasterPage.master". Please let me know what changes i need to offset sub menu in in proper position.
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!DOCTYPE html>
<
head
runat
=
"server"
>
<
title
></
title
>
<
style
>
.demo-container {
width: 460px;
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(104, 176, 237, .75);
color: black;
width: 150px;
}
html div.RadMenu_Glow .rmItem .rmSlide .rmFirstGroupColumn .rmLevel1 {
background: url("logout_blue.gif") no-repeat scroll 0 0 rgba(104, 176, 237, .75);
background-repeat: no-repeat;
padding-left: 190px;
}
html div.RadMenu_Glow .rmPopup {
background: none repeat scroll 0 0 rgb(50, 82, 204);
}
.demo-container .RadMenu .rmPopup {
width: 300px;
}
html div.RadMenu_Glow .rmItem .rmSlide .rmLevel2 {
background-color: rgb(0, 82, 204);
color: black;
}
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:ContentPlaceHolder
ID
=
"head"
runat
=
"server"
></
asp:ContentPlaceHolder
>
</
head
>
<
body
>
<
form
id
=
"Form1"
runat
=
"server"
>
<
telerik:RadScriptManager
ID
=
"RadScriptManager1"
runat
=
"server"
AsyncPostBackTimeout
=
"600"
></
telerik:RadScriptManager
>
<
telerik:RadAjaxLoadingPanel
ID
=
"RadAjaxLoadingPanel"
ClientIDMode
=
"Static"
runat
=
"server"
Skin
=
"Simple"
></
telerik:RadAjaxLoadingPanel
>
<
telerik:RadAjaxManager
ID
=
"RadAjaxManager1"
runat
=
"server"
DefaultLoadingPanelID
=
"RadAjaxLoadingPanel"
></
telerik:RadAjaxManager
>
<
div
class
=
"demo-container"
>
<
telerik:RadMenu
RenderMode
=
"Lightweight"
runat
=
"server"
ID
=
"RadMenu2"
Skin
=
"Glow"
ClickToOpen
=
"false"
>
<
DefaultGroupSettings
Height
=
"270px"
/>
<
Items
>
<
telerik:RadMenuItem
Text
=
"Menu Item 1"
GroupSettings-OffsetX
=
"0"
>
<
Items
>
<
telerik:RadMenuItem
Text
=
"Item2"
><
Items
>
<
telerik:RadMenuItem
Text
=
"SubItem1"
>
</
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"SubItem2"
></
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"SubItem3"
></
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"SubItem4"
></
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"SubItem5"
></
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"SubItem6"
></
telerik:RadMenuItem
>
</
Items
></
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"Item3"
></
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"Item4"
></
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"Item5"
></
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"Item6"
></
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"Item7"
></
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"Item8"
></
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"Item9"
></
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"Item1"
>
<
Items
>
<
telerik:RadMenuItem
Text
=
"SubItem1"
>
</
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"SubItem2"
></
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"SubItem3"
></
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"SubItem4"
></
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"SubItem5"
></
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"SubItem6"
></
telerik:RadMenuItem
>
</
Items
>
</
telerik:RadMenuItem
>
</
Items
>
</
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"Menu Item 2"
GroupSettings-OffsetX
=
"0"
>
<
Items
>
<
telerik:RadMenuItem
Text
=
"Item2"
><
Items
>
<
telerik:RadMenuItem
Text
=
"SubItem1"
>
</
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"SubItem2"
></
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"SubItem3"
></
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"SubItem4"
></
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"SubItem5"
></
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"SubItem6"
></
telerik:RadMenuItem
>
</
Items
></
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"Item3"
></
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"Item4"
></
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"Item5"
></
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"Item6"
></
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"Item7"
></
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"Item8"
></
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"Item9"
></
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"Item1"
>
<
Items
>
<
telerik:RadMenuItem
Text
=
"SubItem1"
>
</
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"SubItem2"
></
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"SubItem3"
></
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"SubItem4"
></
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"SubItem5"
></
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"SubItem6"
></
telerik:RadMenuItem
>
</
Items
>
</
telerik:RadMenuItem
>
</
Items
>
</
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"Menu Item 3"
GroupSettings-OffsetX
=
"0"
>
<
Items
>
<
telerik:RadMenuItem
Text
=
"Item2"
><
Items
>
<
telerik:RadMenuItem
Text
=
"SubItem1"
>
</
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"SubItem2"
></
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"SubItem3"
></
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"SubItem4"
></
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"SubItem5"
></
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"SubItem6"
></
telerik:RadMenuItem
>
</
Items
></
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"Item3"
></
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"Item4"
></
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"Item5"
></
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"Item6"
></
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"Item7"
></
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"Item8"
></
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"Item9"
></
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"Item1"
>
<
Items
>
<
telerik:RadMenuItem
Text
=
"SubItem1"
>
</
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"SubItem2"
></
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"SubItem3"
></
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"SubItem4"
></
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"SubItem5"
></
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"SubItem6"
></
telerik:RadMenuItem
>
</
Items
>
</
telerik:RadMenuItem
>
</
Items
>
</
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"Menu Item 4"
GroupSettings-OffsetX
=
"0"
>
<
Items
>
<
telerik:RadMenuItem
Text
=
"Item2"
><
Items
>
<
telerik:RadMenuItem
Text
=
"SubItem1"
>
</
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"SubItem2"
></
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"SubItem3"
></
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"SubItem4"
></
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"SubItem5"
></
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"SubItem6"
></
telerik:RadMenuItem
>
</
Items
></
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"Item3"
></
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"Item4"
></
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"Item5"
></
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"Item6"
></
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"Item7"
></
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"Item8"
></
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"Item9"
></
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"Item1"
>
<
Items
>
<
telerik:RadMenuItem
Text
=
"SubItem1"
>
</
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"SubItem2"
></
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"SubItem3"
></
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"SubItem4"
></
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"SubItem5"
></
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"SubItem6"
></
telerik:RadMenuItem
>
</
Items
>
</
telerik:RadMenuItem
>
</
Items
>
</
telerik:RadMenuItem
>
</
Items
>
<
DefaultGroupSettings
RepeatColumns
=
"3"
RepeatDirection
=
"Vertical"
/>
</
telerik:RadMenu
>
</
div
>
<
asp:ContentPlaceHolder
ID
=
"ContentPlaceHolder1"
runat
=
"server"
></
asp:ContentPlaceHolder
>
</
form
>
</
body
>
</
html
>