Bring To Front 'Sub - Menu Items' or Setting Back The 'Content Page'

[Prathap Singh]

I cannot see the Complete list of the Sub - menuitems(Child ) while on run Time. Menu Items are set Horizontally, the Sub Menus vertically.

On Runtime while cliking the MenuItem, half of the Child Items Goes under the Content Page.

It Can be Viewed only when the Panel Inside the Content Page is Dragged down before Debugging.

The Position for the MenuItems is set as 'Absolute'. I Tried that without Keeping 'Ablsolute' also

How can I bring the Complete - List of the Child Items without Dragging down the content page or the Panel Inside the Content page?

[Frinavale]

Set the MenuItems style to "position:absol ute; z-index:100;".

The z-index should pull the menu items on top of the other items in the page.

-Frinny

[dean9359]

To get this to work I had to reference the style as:<DynamicMenuSty le CssClass="zorde r" />
on the Menu control.

Where zorder is defined as:

.zorder
{
    z-index: 100;
    position: absolute;
}

Thanks for the tip.

[Ruchir Bansal]

We had an issue where the second level vertical menu hid behind its parent horizontal menu, as the parent would wrap over to a second line. Your suggestions Frinavale helped. The final code is as follows:

1) On the aspx page:

<div>
     <asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" StaticEnableDefaultPopOutImage="False"
                                MaximumDynamicDisplayLevels="3" CssClass="MenuLevel1">
<LevelMenuItemStyles>
<asp:MenuItemStyle ForeColor="#595959" BackColor="#FFFFFF" HorizontalPadding="5px"
                                        VerticalPadding="5px" Font-Bold="true" />
                                    <asp:MenuItemStyle Width="180px" BorderColor="#EEEEEE" BorderWidth="1px" ForeColor="#595959"
                                        BackColor="#F2FFFF" VerticalPadding="5px" HorizontalPadding="5px" />
                                    <asp:MenuItemStyle BorderColor="#EEEEEE" BorderWidth="1px" ForeColor="#595959" BackColor="#F2FFFF"
                                        VerticalPadding="5px" HorizontalPadding="5px" />
                                </LevelMenuItemStyles>
                            </asp:Menu>
                        </div>

2) The style sheet then had the following code:

.MenuLevel1
{
    padding-top: 2px;
    padding-left: 5px;
    padding-right: 5px;
    color: #595959;
    border-color: #EEEEEE;
    border-width: 1px;
    background-color: White;
    position: relative;
    z-index: 100;
}

.MenuLevel2
{
    padding-top: 2px;
    padding-left: 5px;
    padding-right: 5px;
    color: #595959;
    border-color: #EEEEEE;
    border-width: 1px;
    background-color: White;
    position: relative;
    z-index: 1;
}

Hope this helps!