title: submenu items in menu are beneath page elements
body: <p>At the <a href="http://staging.slo-pitch.com/default_demo.aspx" rel="nofollow">top of this page</a> 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.</p>
  
  <p>Menu CSS:</p>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p>demo.css</p>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p>The master page</p>
  
  <pre><code>&lt;%@ Master Language="C#" AutoEventWireup="true" CodeFile="Demo.master.cs" Inherits="MasterPages_Demo" %&gt;
  &lt;%@ MasterType TypeName="BaseMasterPage" %&gt;
  &lt;%@ Register Src="~/MasterPages/Controls/Headliner.ascx" TagName="Headliner" TagPrefix="uc1" %&gt;
  &lt;%@ Register Src="~/MasterPages/Controls/MegaTemplateMenu.ascx" TagName="MegaTemplateMenu"
      TagPrefix="uc2" %&gt;
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" id="html_tag" runat="server"&gt;
  &lt;head id="Head1" runat="server"&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;telerik:RadStyleSheetManager ID="RadStyleSheetManager2" runat="server" /&gt;
      &lt;link id="Link1" runat="server" href="~/css/demo.css" rel="stylesheet" type="text/css" /&gt;
      &lt;link id="Link2" runat="server" href="~/css/megamenu.css" rel="stylesheet" type="text/css" /&gt;
      &lt;asp:ContentPlaceHolder ID="head" runat="server"&gt;
      &lt;/asp:ContentPlaceHolder&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;form id="form1" runat="server"&gt;
      &lt;telerik:RadScriptManager ID="RadScriptManager1" runat="server"&gt;
      &lt;/telerik:RadScriptManager&gt;
      &lt;div id="wrapper"&gt;
          &lt;uc2:MegaTemplateMenu ID="MegaTemplateMenu1" runat="server" /&gt;
          &lt;uc1:Headliner ID="Headliner1" runat="server" /&gt;
          &lt;div id="main"&gt;
              &lt;div id="content" class="margin"&gt;
                  &lt;asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"&gt;
                  &lt;/asp:ContentPlaceHolder&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="push"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="bottom"&gt;
          &lt;div id="footer"&gt;
              &lt;div class="box-footer-1"&gt;
              &lt;/div&gt;
              &lt;div class="box-footer-2"&gt;
                  &lt;ul class="yellow"&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Rules&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                  &lt;br /&gt;
                  &lt;br /&gt;
                  &lt;ul class="blue"&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Volunteer Opportunities&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
              &lt;div class="box-footer-3"&gt;
                  &lt;h2&gt;
                      Personnel&lt;/h2&gt;
                  &lt;ul class="white"&gt;
                      &lt;li&gt;&lt;a href="#"&gt;BC &amp; Yukon&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Ontario&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Alberta&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Saskatchewan&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Manitoba / Nunavut&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Quebec&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Maritimes&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;NFLD &amp; Labrador&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                  &lt;h2&gt;
                      National Office&lt;/h2&gt;
                  &lt;h2 class="blue"&gt;
                      Map / Driving Directions&lt;/h2&gt;
              &lt;/div&gt;
              &lt;div class="box-footer-4"&gt;
                  &lt;h2 class="blue"&gt;
                      Feedback&lt;/h2&gt;
                  &lt;div style="padding-bottom: 10px;"&gt;
                      &lt;asp:TextBox ID="txtEmailFeedback" runat="server" Width="180px" CssClass="small italic"
                          ForeColor="#333333"&gt;enter your email address&lt;/asp:TextBox&gt;
                  &lt;/div&gt;
                  &lt;div&gt;
                      &lt;asp:TextBox ID="txtFeedback" runat="server" TextMode="MultiLine" Rows="5" Width="180px"&gt;&lt;/asp:TextBox&gt;
                  &lt;/div&gt;
                  &lt;div style="text-align: right; width: 187px;"&gt;
                      &lt;asp:Button ID="btnFeedback" runat="server" Text="Submit" Width="75px" /&gt;
                  &lt;/div&gt;
                  &lt;h2 class="blue"&gt;
                      Sign up for our newsletter:&lt;/h2&gt;
                  &lt;div&gt;
                      &lt;asp:TextBox ID="txtEmailNewsletter" runat="server" Width="180px" CssClass="small italic"
                          ForeColor="#333333"&gt;enter your email address&lt;/asp:TextBox&gt;
                  &lt;/div&gt;
                  &lt;div style="text-align: right; width: 187px;"&gt;
                      &lt;asp:Button ID="btnNewsletterSignUp" runat="server" Text="Sign Up" Width="75px" /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="clear"&gt;
              &lt;/div&gt;
              &lt;div id="copyright"&gt;
                  &lt;div class="left" style="margin-top: 7px; margin-left: 10px;"&gt;
                      &lt;span class="small"&gt;
                          &lt;asp:Label ID="lblCopyright" runat="server"&gt;&lt;/asp:Label&gt;&lt;/span&gt;
                  &lt;/div&gt;
                  &lt;div class="right" style="margin-top: 5px; margin-right: 5px;"&gt;
                      &lt;asp:HyperLink ID="linkPrivacy" runat="server" NavigateUrl="~/privacy-policy.aspx"&gt;Privacy Policy&lt;/asp:HyperLink&gt;
                      |
                      &lt;asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/terms-of-use.aspx"&gt;Terms of use&lt;/asp:HyperLink&gt;
                  &lt;/div&gt;
                  &lt;div class="clear"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>