メニューのサブメニュー項目はページ要素の下にあります

Question

top of this pageはjqueryメニューです。 '彼のためのもの'の上にカーソルを置くと、サブメニュー項目は#headliner divの後ろに失われます。黒いフッターの後ろにも失われています。私は別のメニュー（Telerik RadMenu）を試して、同じ問題が発生します。私は何が起こっているかについていくつかの洞察を与えるために別の目を必要とします。 HTML/CSSコードは以下のとおりです。

メニュー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; 
} 

マスターページ

<%@ 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><a href="#">Rules</a></li> 
       </ul> 
       <br /> 
       <br /> 
       <ul class="blue"> 
        <li><a href="#">Volunteer Opportunities</a></li> 
       </ul> 
      </div> 
      <div class="box-footer-3"> 
       <h2> 
        Personnel</h2> 
       <ul class="white"> 
        <li><a href="#">BC & Yukon</a></li> 
        <li><a href="#">Ontario</a></li> 
        <li><a href="#">Alberta</a></li> 
        <li><a href="#">Saskatchewan</a></li> 
        <li><a href="#">Manitoba/Nunavut</a></li> 
        <li><a href="#">Quebec</a></li> 
        <li><a href="#">Maritimes</a></li> 
        <li><a href="#">NFLD & Labrador</a></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

私は位置削除する場合：#bottomと#headlinerからの相対を - サブメニューが開きます#headlinerと#bottom divをオーバーライドします