submenu items in menu are beneath page elements - asp.net

Question

At the top of this page is a jquery menu. When putting the cursor over 'stuff for him' the submenu item is lost behind the #headliner div. It also is lost behind the black footer. I have tried another menu (Telerik RadMenu) and the same problem occurs. I need another set of eyes to give me some insight on what's happening. Html / CSS Code below.
Menu CSS:
ul#menu {
background: #940;
color: #fff;
margin: 0;
padding: 0.3em 0em;
}
ul#menu li {
display: inline;
margin: 0.1em 1em;
position: relative;
}
ul#menu h2, ul#menu h3 {
font-size: 100%;
font-weight: normal;
display: inline;
}
ul#menu li a {
color: #fff;
text-decoration: none;
padding: 0 0.4em;
}
ul#menu li a:hover {
text-decoration: underline;
}
ul#menu li.mega a {
background: transparent url(../images/icons/arrow.gif) center right no-repeat;
padding: 0 1.2em;
}
ul#menu li.mega a:hover {
text-decoration: underline;
}
ul#menu div {
display: none;
}
ul#menu li.mega div {
border: 1px solid #dda;
width: 18em;
position: absolute;
top: 1.6em;
left: 0em;
padding: 1.3em;
background: #ffc;
color: #930;
}
ul#menu li.hovering div {
display: block;
}
ul#menu li.mega div a {
color: #300;
padding: 0;
background-image: none;
text-decoration: underline;
}
ul#menu li div a.more {
color: #390;
font-weight: bold;
}
ul#menu div h3 {
color: #f70;
font-weight: bold;
font-size: 1.1em;
}
ul#menu div p {
margin: 0 0 0.8em 0;
padding: 0;
}
demo.css
html, body, form
{
margin: 0px;
padding:0px;
height: 100%;
}
body {
background: url("../images/common/2010_logo_bg_02.gif") repeat;
font: 12px Arial,Helvetica,FreeSans,"Liberation Sans","Nimbus Sans L",sans-serif;
}
#wrapper
{
height: auto !important;
height: 100%;
min-height: 100%;
position: relative;
width:1000px;
margin: 0 auto -435px;
background-color:#ebebeb;
}
.push {
height: 435px;
}
#topsection
{
width:1000px;
}
#commandbar div
{
color: #333333;
}
#main
{
background-color: #ebebeb;
}
#bottom
{
position:relative;
margin: 0 auto;
height: 435px;
width: 1000px;
}
#footer {
background: #000;
color: #fff;
font-size: 12px;
}
#footer ul.yellow li a {
color: #f5eb26;
font-size: 14px;
font-weight:bold;
}
#footer ul.yellow li a:hover {
text-decoration:underline;
}
#footer ul.blue li a {
color: #66ccff;
font-size: 14px;
font-weight:bold;
}
#footer ul.blue li a:hover {
text-decoration:underline;
}
#footer ul.white li a {
color: #ffffff;
font-size: 12px;
}
#footer ul.white li a:hover {
text-decoration:underline;
}
#footer .box-footer-1 div.more,
#footer .box-footer-2 div.more,
#footer .box-footer-3 div.more,
#footer .box-footer-4 div.more {
text-align: right;
}
#footer .box-footer-1 div.more a,
#footer .box-footer-2 div.more a,
#footer .box-footer-3 div.more a,
#footer .box-footer-4 div.more a {
color: #ffff00;
text-decoration: none;
}
#footer .box-footer-1 {
float:left;
width: 390px;
_width: 400px;
height: 389px;
padding: 20px 10px 0px 0px;
border-right: 1px solid #666;
margin-left:15px;
}
#footer .box-footer-1 img {
margin-bottom: 10px
}
#footer .box-footer-2 {
float:left;
width: 194px;
height: 389px;
padding: 20px 10px 0px 10px;
border-right: 1px solid #666;
}
#footer .box-footer-2 ul {
margin: 0px;
padding: 0px;
}
#footer .box-footer-2 ul li {
margin: 10px 0px 0px 10px;
list-style: none;
}
#footer .box-footer-3 {
float:left;
width: 140px;
height: 389px;
padding: 20px 10px 0px 10px;
border-right: 1px solid #666;
}
#footer .box-footer-3 ul {
margin: 10px;
padding: 10px;
}
#footer .box-footer-4 {
float:left;
width: 129px;
padding: 20px 10px 0px 10px;
height: 389px;
}
#footer .box-footer-4 ul {
margin: 0px;
padding: 0px;
}
#footer .box-footer-4 ul li {
margin: 10px 0px 0px 20px;
list-style: none;
}
#footer h1 {
margin: 0px 0px 10px 0px;
padding: 0px;
font-size: 20px;
}
#footer h2.blue {
color: #66ccff;
}
#footer h2 {
margin-top: 10px;
padding: 0px;
font-size: 14px;
color: #f5eb26;
}
#copyright
{
background: #ccc;
color: #000;
height:25px;
}
#copyright a
{
font-size: 10px;
text-decoration:none;
}
h1
{
font-size:16px;
}
.clear {
clear: both;
}
.left
{
float:left;
}
.right {
float: right;
}
.outer_canvas
{
background-color:#ffffff;
padding-left:10px;
padding-bottom:30px;
border: 1px solid silver;
}
.inner_canvas
{
background-color:#f4f3f3;
margin-left:0px;
margin-top:15px;
margin-right:20px;
padding:15px 15px 20px 20px;
border: 1px solid #e5e5e5;
}
.margin
{
margin:10px;
}
.margintop
{
margin-top:5px;
}
.marginbottom
{
margin-bottom:15px;
}
.marginleft
{
margin-left:10px;
}
.marginright
{
margin-right:10px;
}
.textbox
{
border: 1px solid silver;
height: 20px;
padding-top: 5px;
padding-left: 5px;
}
.padding
{
padding:15px;
}
.surround
{
padding: 10px 0px 10px 0px;
}
.small
{
font-size:10px;
}
.italic
{
font-style:italic;
}
.bold
{
font-weight:bold;
}
.big
{
font-size:20px;
}
.underline
{
text-decoration:underline;
}
.error
{
color: Red;
font-weight:bold;
}
.blue
{
color:Blue;
}
.light_blue
{
color: #005ABE;
}
.lightblue_shading, h2.lightblue_shading
{
color: #005ABE;
margin:3px;
}
.white
{
color:#ffffff;
}
.grey
{
color:#cccccc;
}
.hide
{
display:none;
}
.break-word {
word-wrap: break-word;
}
.success_border
{
border:2px dashed green;
}
.error_border
{
border:2px solid red;
}
.mappoints
{
padding:0;
margin:0;
}
.mappoints li
{
list-style-type:none;
}
/* --------- Headliner --------- */
#headliner
{
height: 38px;
position:relative;
width: 1000px;
margin: 0 auto;
background-image: url('../images/common/headliner_bg.jpg');
}
#headliner h1
{
margin:0px;padding:0px;
}
#left_container
{
float:left;
margin-top:5px;
background-color:#ffffff;
}
#right_container
{
float:left;
margin-top:5px;
}
The master page
<%# Master Language="C#" AutoEventWireup="true" CodeFile="Demo.master.cs" Inherits="MasterPages_Demo" %>
<%# MasterType TypeName="BaseMasterPage" %>
<%# Register Src="~/MasterPages/Controls/Headliner.ascx" TagName="Headliner" TagPrefix="uc1" %>
<%# Register Src="~/MasterPages/Controls/MegaTemplateMenu.ascx" TagName="MegaTemplateMenu"
TagPrefix="uc2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" id="html_tag" runat="server">
<head id="Head1" runat="server">
<title></title>
<telerik:RadStyleSheetManager ID="RadStyleSheetManager2" runat="server" />
<link id="Link1" runat="server" href="~/css/demo.css" rel="stylesheet" type="text/css" />
<link id="Link2" runat="server" href="~/css/megamenu.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
</telerik:RadScriptManager>
<div id="wrapper">
<uc2:MegaTemplateMenu ID="MegaTemplateMenu1" runat="server" />
<uc1:Headliner ID="Headliner1" runat="server" />
<div id="main">
<div id="content" class="margin">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
<div class="push">
</div>
</div>
<div id="bottom">
<div id="footer">
<div class="box-footer-1">
</div>
<div class="box-footer-2">
<ul class="yellow">
<li>Rules</li>
</ul>
<br />
<br />
<ul class="blue">
<li>Volunteer Opportunities</li>
</ul>
</div>
<div class="box-footer-3">
<h2>
Personnel</h2>
<ul class="white">
<li>BC & Yukon</li>
<li>Ontario</li>
<li>Alberta</li>
<li>Saskatchewan</li>
<li>Manitoba / Nunavut</li>
<li>Quebec</li>
<li>Maritimes</li>
<li>NFLD & Labrador</li>
</ul>
<h2>
National Office</h2>
<h2 class="blue">
Map / Driving Directions</h2>
</div>
<div class="box-footer-4">
<h2 class="blue">
Feedback</h2>
<div style="padding-bottom: 10px;">
<asp:TextBox ID="txtEmailFeedback" runat="server" Width="180px" CssClass="small italic"
ForeColor="#333333">enter your email address</asp:TextBox>
</div>
<div>
<asp:TextBox ID="txtFeedback" runat="server" TextMode="MultiLine" Rows="5" Width="180px"></asp:TextBox>
</div>
<div style="text-align: right; width: 187px;">
<asp:Button ID="btnFeedback" runat="server" Text="Submit" Width="75px" />
</div>
<h2 class="blue">
Sign up for our newsletter:</h2>
<div>
<asp:TextBox ID="txtEmailNewsletter" runat="server" Width="180px" CssClass="small italic"
ForeColor="#333333">enter your email address</asp:TextBox>
</div>
<div style="text-align: right; width: 187px;">
<asp:Button ID="btnNewsletterSignUp" runat="server" Text="Sign Up" Width="75px" />
</div>
</div>
<div class="clear">
</div>
<div id="copyright">
<div class="left" style="margin-top: 7px; margin-left: 10px;">
<span class="small">
<asp:Label ID="lblCopyright" runat="server"></asp:Label></span>
</div>
<div class="right" style="margin-top: 5px; margin-right: 5px;">
<asp:HyperLink ID="linkPrivacy" runat="server" NavigateUrl="~/privacy-policy.aspx">Privacy Policy</asp:HyperLink>
|
<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/terms-of-use.aspx">Terms of use</asp:HyperLink>
</div>
<div class="clear">
</div>
</div>
</div>
</div>
</form>
</body>
</html>

Answer 1

If I remove position:relative from #bottom and #headliner - the submenu opens over the #headliner and #bottom divs.