At the top of this page is a jquery menu. When putting the cursor

Question

0

Asked: May 24, 20262026-05-24T00:00:08+00:00 2026-05-24T00:00:08+00:00

At the top of this page is a jquery menu. When putting the cursor

0

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

Report

Leave an answer
Cancel reply

You must login to add an answer.

Need An Account,

1 Answer

Editorial Team · Answer 1 · 2026-05-24T00:00:09+00:00

Editorial Team

2026-05-24T00:00:09+00:00Added an answer on May 24, 2026 at 12:00 am

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

0

Reply
Share
Share

- Report

Sign Up

Sign In

Forgot Password

The Archive Base Latest Questions

At the top of this page is a jquery menu. When putting the cursor

Leave an answerCancel reply

1 Answer

Leave an answer
Cancel reply