Sub Menu Items Overlap over each other with Image Sprites

[Harry]

Hi,

I am using Radmenu with ImageSprites enabled to give selection options to users on the site. The problem is that the submenu items are overlapping on each other when used with vertical flow, while it works well with the horizontal flow being selected. I want the menu items (buttons/image sprites) to align vertically on top of each other.

Code for Horizontal Menu Style

 

01.<telerik:RadMenu ID="MenuQ3" runat="server" CssClass="RadMenu_Fixed2016" Flow="Vertical" CollapseDelay="10" EnableImageSprites="True">
02.<Items>
03.<telerik:RadMenuItem runat="server" EnableImageSprite="True" ImageUrl="~/ImagesSys/swTSSPrintMenu.png" BorderStyle="None">
04.<Items>
05.<telerik:RadMenuItem runat="server" EnableImageSprite="True" ImageUrl="~/ImagesSys/swTSSQuotation.png" Owner="" NavigateUrl="ZLPPrintSummary.aspx?refLPQ3=1">
06.</telerik:RadMenuItem>
07.<telerik:RadMenuItem runat="server" EnableImageSprite="True" ImageUrl="~/ImagesSys/swTSSCompatativeStatement.png" Owner="" NavigateUrl="ZLPPrintSummary.aspx?refLPQ3=2">
08.</telerik:RadMenuItem>
09.<telerik:RadMenuItem runat="server" EnableImageSprite="True" ImageUrl="~/ImagesSys/swTSSCFASanction.png" Owner="" NavigateUrl="ZLPPrintSummary.aspx?refLPQ3=3">
10.</telerik:RadMenuItem>
11.<telerik:RadMenuItem runat="server" EnableImageSprite="True" ImageUrl="~/ImagesSys/swTSSSupplyOrder.png" Owner="" NavigateUrl="ZLPPrintSummary.aspx?refLPQ3=4">
12.</telerik:RadMenuItem>
13.<telerik:RadMenuItem runat="server" EnableImageSprite="True" ImageUrl="~/ImagesSys/swTSSGFRCert.png" Owner="" NavigateUrl="ZLPPrintSummary.aspx?refLPQ1=11">
14.</telerik:RadMenuItem>
15.</Items>
16.</telerik:RadMenuItem>
17.</Items>
18.<DefaultGroupSettings ExpandDirection="Left" Flow="Horizontal" RepeatDirection="Horizontal" OffsetX="1" OffsetY="1" />
19.</telerik:RadMenu>

 

 

    Code for Vertical Menu Style (desired, but buttons/menu items are overlapping each other)

01.<telerik:RadMenu runat="server" CollapseDelay="1" EnableAutoScroll="True" EnableImageSprites="True">
02.<Items>
03.<telerik:RadMenuItem runat="server" ImageUrl="~/ImagesSys/swTSSPrintMenu.png">
04.<GroupSettings ExpandDirection="Down" Flow="Vertical" RepeatDirection="Vertical" OffsetX="45" OffsetY="5" />
05.<Items>
06.<telerik:RadMenuItem runat="server" EnableImageSprite="True" ImageUrl="~/ImagesSys/swTSSQuotation.png">
07.<GroupSettings OffsetX="45" OffsetY="5" />
08.</telerik:RadMenuItem>
09.<telerik:RadMenuItem runat="server" EnableImageSprite="True" ImageUrl="~/ImagesSys/swTSSCRV.png">
10.<GroupSettings OffsetX="45" OffsetY="5" />
11.</telerik:RadMenuItem>
12.<telerik:RadMenuItem runat="server" EnableImageSprite="True" ImageUrl="~/ImagesSys/swTSSSupplyOrder.png">
13.</telerik:RadMenuItem>
14.<telerik:RadMenuItem runat="server" EnableImageSprite="True" ImageUrl="~/ImagesSys/swTSSGFRCert.png" Owner="">
15.</telerik:RadMenuItem>
16.</Items>
17.</telerik:RadMenuItem>
18.</Items>
19.</telerik:RadMenu>

CSS

01..RadMenu_Fixed2016
02.      {
03.          position: fixed !important;
04.          height: 28px;
05.          width: 139px; /* link goes at the bottom of the page */
06.          top: 100%;
07.          margin-top: -120px; /*140 = height + preferred bottom margin */ /* link is moved to the right */
08.          right: 0%;
09.          margin-right: 2px; /* = half of width */
10.          cursor: hand !important;
11.      }

Please help me with the code to stop the buttons in the vertical menu from over lapping on each other.

[Veselin Tsvetanov]

Hi Harry,

Attached you will find a simple page based on your code and a screenshot of the page running. As you will notice, the items of the vertically expanded menu are not overlapping, even if they are quite small (low).

Regards,
Veselin Tsvetanov
Telerik