I have an ASPX master page that contains a site master navigation control. When hovering over a link on the navigation control a sub menu of links pops up. On a detail page, I have a few divs. One of which acts like an edit control panel for the page. Whenever I access the navigation control’s submenu, it pops up behind the control panel on the detail page, as seen below.
The problem being that the navigation submenu is not fully visible to the user. Here is what I have for my Navigation Control code:
<div id="sitemasternav">
<div="divMenu" style="padding-left: 2%; width: 100%;">
<asp:Menu ID="MyMenu" runat="server" DataSourceID="SiteMapDataSource1" OnMenuItemDataBound="MyMenu_MenuItemDataBound"
Orientation="Vertical"
StaticDisplayLevels="2" CssClass="menu" Height="30" Width="100%"
BackColor="#DFDFB8"
DynamicHorizontalOffset="2" Font-Names="Verdana" MaximumDynamicDisplayLevels="10"
ForeColor="White" StaticSubMenuIndent="10px">
<StaticSelectedStyle BackColor="#DFDFB8" />
<StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="5px" Width="100" />
<DynamicMenuStyle BackColor="#DFDFB8" ForeColor="Black" BorderColor="Black" BorderWidth="1" />
<DynamicSelectedStyle BackColor="#FFCC66" />
<DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="5px" />
<DynamicHoverStyle BackColor="#990000" Font-Bold="False" ForeColor="White" />
<StaticHoverStyle BackColor="#990000" Font-Bold="False" ForeColor="White" />
</asp:Menu>
</div>
</div>
For the #Div1 edit control panel in the detail page, i have the following CSS:
.divEditMenu {
border: 5px solid black;
position: sticky;
display: inline-block;
z-index: 999999;
background-color: ghostwhite;
top: 0;
right: 0;
left: 0;
margin-bottom: 1%;
}
Appreciate any thoughts that might help fix this.
1