RadMenu Subgroup Size and Position

[Jim]

Could someone help me with a CSS question for the RadMenu?

I have RadMenu with several root items.  The menu is rendered horizontally.  When you hover over one of the root items so the sub menu items are displayed, the left edge of the slider panel that contains these items starts directly beneath the root item.

I would like to change that so when you hover over a root item, the slider panel that drops down always is the same width, and the left edge of it is always in the same position, while the height auto-adjusts based on content.

I am currently using a custom skin to style my menu.  Can someone tell me what classes I need to modify, and what properties I need in order to achieve this?  Below is a link to a drawing that illustrates the current behavior, and the behavior that I want.

Example Illustration - Click to View

Thank you for your time,
Jim

[Kate]

Hello Jim,

The appearance that you are trying to accomplish can easily be achieved by getting the correct css class selectors and set the appropriate properties. Can you provide a live url that I can inspect locally and help you out?

Regards,
Kate
the Telerik team

[Jim]

Hi Kate,

I understand that all I need to do is set the correct properties and css class selectors.  The trick is getting the right ones, with the right values.  I do not have a live example of this, I am developing it locally.  However, I do have the menu in a user control, and the skin file that I have created (per Telerik documentation) that you can plug into your development site.  You can download the files here.

Thank you for your assistance.
Jim

[Kate]

Hello Jim,

Thank you for providing me the project that I could test locally. To position the dropdown of all of the items at one and the same place you can use the following css class selector:

<style type="text/css">
       .rmTemplate {
           position: fixed !important;
           left: 0px;
       }
   </style>

 
Further if you need to set a specific width to the items I would suggest that you do so by using the RadMenuItem:

... <Items>
                   <telerik:RadMenuItem Width="950px">
                       <ItemTemplate>
                           <div  .....

Please give it a try and let me know if this helps.

Kind regards,
Kate
the Telerik team

[Jim]

Kate,

Thank you for your reply.  I tried the code that you suggested and I wasn't able to achieve the desired result with my particular page setup.  The template that I am using for my pages uses a left and right margin setting of 'auto' in order to center the page content based on the user's browser window size.

If I use the code that you suggested, it always places the submenu all the way to the left, not all the way to the left of the centered content as desired.  Please reference this page as an example and let me know what I need to do different to achieve the desired result.

Thank you,
Jim

[Kate]

Hi Jim,

Thank you for clarifying that. You can explicitly set the position of the dropdown by using GroupSettings in the following way:

<telerik:RadMenuItem Text="Avant Garde<br>Annuals" PostBack="false">
                <GroupSettings OffsetX="-20" />
....
     <telerik:RadMenuItem Text="Tres Chic<br>Tropicals" PostBack="false">
                   <GroupSettings OffsetX="-160" />
                <Items>
.....

     <telerik:RadMenuItem Text="Culinary<br>Couture" PostBack="false">
                 <GroupSettings OffsetX="-280" />
                <Items>
......

Greetings,
Kate
the Telerik team