Having trouble with a drop-down menu in my MasterPage file that keeps dropping behind objects on the ASPX page. I've tried using CSS to set different z-index values and position attributes, but it's not working as expected. Is this even possible to achieve? Does anyone else have a working drop-down menu in their masterPage file without it getting hidden by elements below? Any ideas on what might be going wrong?
MasterPage code:
</head>
<body class="innermainbg">
<form id="Form1" runat="server">
<div>
<div class="header">
<div id="nav" class="clear hideSkiplink nav" >
<asp:Menu ID="NavigationMenu" runat="server" Orientation="Horizontal" CssClass="menu" >
<staticmenuitemstyle horizontalpadding="20"/>
<Items>
<asp:MenuItem Text="Search" NavigateUrl="~/Default.aspx" Value="Item1" >
<asp:MenuItem Text="Search By Age" NavigateUrl="~/SearchByAge.aspx" Value="Sub Item2"></asp:MenuItem>
<asp:MenuItem Text="Search By Price" NavigateUrl="~/SearchByPrice.aspx" Value="Sub Item3"></asp:MenuItem>
<asp:MenuItem Text="Search By Date" NavigateUrl="~/SearchByDate.aspx" Value="Sub Item2"></asp:MenuItem>
<asp:MenuItem Text="Search By Type" NavigateUrl="~/SearchByType.aspx" Value="Sub Item3"></asp:MenuItem>
<asp:MenuItem Text="Advanced Search" NavigateUrl="~/AdvSearch.aspx" Value="Sub Item1"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="Get Listed Free!" NavigateUrl="~/GetListed.aspx" Value="Item2">
</asp:MenuItem>
<asp:MenuItem Text="Advertise" NavigateUrl="~/Advertise.aspx" Value="Item2">
<asp:MenuItem Text="Links" NavigateUrl="~/Links.aspx" Value="Sub Item1"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="About" NavigateUrl="~/About.aspx" Value="Item2">
<asp:MenuItem Text="Terms" NavigateUrl="~/Terms.aspx" Value="Sub Item1"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="Contact" NavigateUrl="~/Contact.aspx" Value="Item2">
<asp:MenuItem Text="Help" NavigateUrl="~/Help.aspx" Value="Sub Item1"></asp:MenuItem>
<asp:MenuItem Text="FAQs" NavigateUrl="~/FAQs.aspx" Value="Sub Item2"></asp:MenuItem>
</asp:MenuItem>
</Items>
</asp:Menu>
</div>
</div>
<div class="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</div>
<div class="clear"></div>
</div>
<div></div>
<div class="footerholder">
<div id="footerContent" class="footer">
© 2014 Professional Expressions Inc. ClassesnWorkshops.com is a registered Trademark of Professional Expressions Inc. All rights reserved.
</div>
</div>
</form>
</body>
</html>
CSS snippet: .back { position: relative; z-index: -1; }
div.menu
{
padding: 0px 0px 0px 0px;
float: right;
width: 100%;
position: relative;
z-index: 100;
}
Partial code from ClassResults.aspx page:
<%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true"
CodeBehind="ClassResults.aspx.cs" Inherits="ClassesnWorkshops.ClassResults" %>
An example of HTML and C# code...