I am using a menu control in my master page. When I hover offer the top level menu, it will drop down. It does not, however, drop down all the way and display over what is below it. I will include the html for the menu control and the CSS file. I did check that the menu has a z-index greater than what is being displayed below the menu.

Any ideas on how to correct this?

Here is the menu control:

<asp:Menu ID="Menu2" runat="server" DataSourceID="SiteMapDataSource" DynamicHorizontalOffset="-3" DynamicVerticalOffset="10" StaticEnableDefaultPopOutImage="false" DynamicEnableDefaultPopOutImage="false" Orientation="horizontal">

<StaticMenuItemStyle CssClass="nav" ItemSpacing="0px" />

<StaticSelectedStyle CssClass="nav_selected" />

<DynamicMenuStyle CssClass="sublevelwrapper" />

<DynamicMenuItemStyle CssClass="sublevel" Width="200px" />

<DynamicSelectedStyle CssClass="sublevel_selected" />

</asp:Menu>

Here is the CSS:

padding-right: 10px;

a.nav, a.nav:link, a.nav:active, a.nav:visited, a.nav:hover

height: 100%;

color:#CDCACA;

a.nav_selected, a.nav_selected:link, a.nav_selected:active, a.nav_selected:visited, a.nav_selected:hover

color: #FFFFFF;

border-left: solid 1px #000000;

background-color:Blue;

a.sublevel, a.sublevel:link, a.sublevel:active, a.sublevel:visited, a.sublevel:hover

display: block;

width: 100%;

z-index:500;

z-index:500;

a.sublevel_selected, a.sublevel_selected:link, a.sublevel_selected:active, a.sublevel_selected:visited, a.sublevel_selected:hover

color: #FFFFFF;

overflow:visible;

Hi,

<asp:Menu ID="Menu1" CssClass="Menu" runat="server"  StaticSubMenuIndent="" Orientation="horizontal"
    StaticEnableDefaultPopOutImage="False" StaticBottomSeparatorImageUrl="~/Graphics/Icons/btn_menuDown.gif" >
    <StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="3px" CssClass="Menu" />
    <DynamicHoverStyle CssClass="SubMenuHoverColor" />
    <DynamicMenuItemStyle BorderColor="Black" BorderWidth="1px" CssClass="SubMenuContent" HorizontalPadding="1px" VerticalPadding="3px"  />
    <Items>
    <asp:MenuItem Selectable="False"  Text="Admin" Value="Admin">
        <asp:MenuItem Text="User" Value="User ">
            <asp:MenuItem NavigateUrl="~/User Management/frmUserProfileView.aspx" Text="User Profile" Value="User Profile"></asp:MenuItem>
            <asp:MenuItem NavigateUrl="~/User Management/frmRoleGrid.aspx" Text="User Role" Value="User Role"></asp:MenuItem>
            <asp:MenuItem NavigateUrl="~/User Management/frmUserGroup.aspx?Mode=New" Text="User Group" Value="User Group">
            </asp:MenuItem>
        </asp:MenuItem>
   
    </Items>
    </asp:Menu>

Try this code with you application.I hope it'll help you

Along with that check this links also.

http://msdn2.microsoft.com/en-us/library/ecs0x9w5(vs.80).aspx 

http://msdn2.microsoft.com/en-us/library/Aa478963.aspx 

Hi,

If you have any other idea about using CSS menu then visit this link.

It's very good and useful.

http://css.maxdesign.com.au/listamatic/vertical01.htm 

You should visit all the below things.

• Home
• Listamatic
• Listamatic2
• Listutorial
• Floatutorial
• Selectutorial

Your providing me with links about menu design but not an answer to my problem. My menu works but only fails when I add too many menu items and the drop down somehow interfers with the html below. It it like the html below would have a higher z-index and the menu would not display over it. That is not the case, the menu has a higher z-index and it still does not display over the html below.

Hi,

NickKA:

It does not, however, drop down all the way and display over what is below it.

Test the code that you provided, we can see the cause of the probelm is the height of the  cssclass sublevel

NickKA:

a.sublevel, a.sublevel:link, a.sublevel:active, a.sublevel:visited, a.sublevel:hover

{

padding: 3px;

display: block;

height: 10px;

width: 100%;

color: #CDCACA;

z-index:500;

overflow:visible;

}

You can try to set it larger, for example 15px.  like this:

NickKA:

height: 15px;

width: 100%;

Hope it helps.