Open RadMenuItem on 100% width of the page

[Daniel]

Hello

I am currently working on a web project that requires the use of RadMenu. 
When the user clicks on RadMenuItem, the Mega Dropdown Menu appears, like this: 
http://demos.telerik.com/aspnet-ajax/menu/examples/megadropdown/defaultvb.aspx?#qsf-demo-source

The menu is located inside a DIV that is 300px wide.  
When the user clicks on the RadMenuItem, I want the Dropdown Menu to open on 100% width of the page.
How can I do this? 

Thank you,
Daniel

[Shinu]

Hi Daniel,

Please try the following code snippet to achieve your scenario.

ASPX:

<telerik:RadMenu runat="server" ID="RadMenu1" Skin="Sitefinity" OnClientItemOpened="itemOpened" Width="880" Height="60" EnableShadows="true">

    <Items>

        <telerik:RadMenuItem Text="Products" PostBack="false">

            <Items>

                <telerik:RadMenuItem CssClass="Products" Width="1500">

                    <ItemTemplate>

                        <div id="CatWrapper" class="Wrapper" style="width: 80%;">

                                   ...

                        </div>

                    </ItemTemplate>

            </telerik:RadMenuItem>

                  ...

          </Items>

         </telerik:RadMenuItem>

            ...

</telerik:RadMenu>

Thanks,
Shinu.

[Daniel]

Hi Shinu,

Thank for your answer. 
Your solution is good but it's not what I need.
I want the RadMenuItem's width to be exactly as the whole page width.
I don't want a fixed amount of pixels, because for example, if my browser's window's width is only 600 pixels, then the RadMenuItem will not be fully inside the window.
Perhaps you can provide me with a different code that always places the RadMenuItem fully inside the window, while its width is exactly the width of the page?

[Shinu]

Hi Daniel,

Please try the following sample code snippet which works fine at my end.

ASPX:

<telerik:RadMenu runat="server" ID="RadMenu1" Skin="Sitefinity" Height="60" EnableShadows="true">
    <Items>
        <telerik:RadMenuItem Text="Products" PostBack="false">
            <Items>
                <telerik:RadMenuItem CssClass="Products" Width="850%">
                    <ItemTemplate>
                        <div id="CatWrapper" class="Wrapper" style="width: 65%;">
                            ...
                        </div>
                        <div id="FeatProduct" style="width: 25%;">
                            ...
                        </div>
                    </ItemTemplate>
            </telerik:RadMenuItem>
                  ...
          </Items>
         </telerik:RadMenuItem>
            ...
</telerik:RadMenu>

Thanks,
Shinu.