1. 首頁
  2. 問答
  3. 菜單中的子菜單項在頁面元素下面

菜單中的子菜單項在頁面元素下面

2011-07-27 96 views
0

在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>

來源

2011-07-27 FiveTools

回答

1

如果我刪除位置：從#bottom網頁和#headliner相對 - 子菜單打開通過#headliner和#bottom div。

來源

2011-07-27 01:23:00 FiveTools

相關問題

 相關問題