CSS Fixed Header with Drop Down Menu

HTML & CSS
1

I am creating a new website with a fixed header/footer. The header contains a drop down menu. The menu works fine, but it appears behind the main content. I tried playing with the z-order, but that didn’t work. Any ideas of what I could try? Thanks for all your help…


CSS:
@charset "utf-8";
/* CSS Document */
body{margin:0}/* for ie mac*/
/* commented backslash hack v2 \\*/ 
html, body{height:100%;padding:0} 
body {min-width:800px}
* html, * html body{
    overflow:hidden;
    padding:60px;
    margin:-60px 0;
    padding:0;
    margin:0;
}
* html #outer { 
    text-align:center;
    voice-family: "\\"}\\""; voice-family:inherit; 
}
* html #outer { text-align:left;}
* html #outer { 
    overflow:auto;
    height:99.9%;
    voice-family: "\\"}\\""; voice-family:inherit; 
}
* html #contain-all{
    text-align:center;
    position:absolute;
    overflow:auto;
    width:100%;
    height:100%;
    z-index:1;
}


/* end hack */ 

#top-bar{
    position:absolute;/* ie6 will treat this as fixed because of a bug where overflow:auto is set on a parent */
    top:0px;
    left:0px;
    height:60px;
    width:100%;
    margin:0;
    padding:0;
    z-index:999;
    overflow:hidden;
}
#topbar-inner {
    height:60px;
    background:#000000;
    text-align:center;/* for ie5*/
}
#footer-inner {
    height:60px;
    background:#000000;
    text-align:center;/* for ie5*/
}

/* mac hide - reduce page to allow the scrollbar to remain visible \\*/
* html #topbar-inner,* html #footer-inner {margin-right:17px;}
/* end hide*/

#footer{
    position:absolute;
    bottom:0;
    width:100%;
    height:40px;
    z-index:999;
}
.spacer {height:60px}/* same height as footer/header to preserve space*/
p{margin-top:0}
#side-bar{
    position:absolute;
    top:80px;
    height:200px;
    left:50%;
    margin-left:-410px;
    width:175px;
    border:1px solid #000;
    background:orange;
}

html>body #top-bar,html>body #footer,html>body #side-bar{position:fixed}/* for moz/opera and others*/

.mid-content{
    width:850px;
    margin:auto;
    background:black;
    height:60px;
    color:#FFFF99;
}
#inner{
    width:850px;
    margin:auto;
    text-align:left;
}

#main-content{
    background:#ffffcc;
    margin-left:175px;
    margin-right:175px;
}


#right {
float:right;
width:174px;
background:orange;
}

/*!!!!!!!!!!! MyCSSMenu Core CSS [Do Not Modify!] !!!!!!!!!!!!!*/
.qmmc .qmdivider{display:block;font-size:1px;border-width:0px;border-style:solid;position:relative;z-index:1;}.qmmc .qmdividery{float:left;width:0px;}.qmmc .qmtitle{display:block;cursor:default;white-space:nowrap;position:relative;z-index:1;}.qmclear {font-size:1px;height:0px;width:0px;clear:left;line-height:0px;display:block;float:none !important;}.qmmc {position:relative;zoom:1;z-index:10000;}.qmmc a, .qmmc li {float:left;display:block;white-space:nowrap;position:relative;z-index:1;}.qmmc div a, .qmmc ul a, .qmmc ul li {float:none;}.qmsh div a {float:left;}.qmmc div{visibility:hidden;position:absolute;}.qmmc li {z-index:auto;}.qmmc ul {left:-10000px;position:absolute;z-index:10;}.qmmc, .qmmc ul {list-style:none;padding:0px;margin:0px;}.qmmc li a {float:none}.qmmc li:hover>ul{left:auto;}#qm0 ul {top:100%;}#qm0 ul li:hover>ul{top:0px;left:100%;}


/*!!!!!!!!!!! MyCSSMenu Styles !!!!!!!!!!!*/


    /* MyCSSMenu 0 */

    /*"""""""" (MAIN) Container""""""""*/    
    #qm0    
    {
    border-width:0px;
    border-style:solid;
    border-color:#000000;
    padding-left: 140px;
    }


    /*"""""""" (MAIN) Items""""""""*/    
    #qm0 a    
    {    
        padding:0px 20px 0px 8px;
        color:#ffffff;
        font-family:Arial;
        font-size:12px;
        text-decoration:none;
    }


    /*"""""""" (MAIN) Hover State""""""""*/    
    #qm0 a:hover    
    {    
        color:#ffff99;
    }


    /*"""""""" (MAIN) Active State""""""""*/    
    body #qm0 .qmactive, body #qm0 .qmactive:hover    
    {    
        background-color:#000000;
        color:#ffff00;
        text-decoration:none;
    }


    /*"""""""" (SUB) Container""""""""*/    
    #qm0 div, #qm0 ul    
    {
    padding:0px;
    margin:0px 0px 0px -1px;
    background-color:#050500;
    border-width:0px 1px 1px;
    border-style:solid;
    border-color:#222200;
    text-align:left;
    }


    /*"""""""" (SUB) Items""""""""*/    
    #qm0 div a, #qm0 ul a    
    {
    padding:-1px 40px 0px 8px;
    border-width:0px;
    border-style:none;
    }


    /*"""""""" (SUB) Hover State""""""""*/    
    #qm0 div a:hover, #qm0 ul a:hover    
    {
    color:#000000;
    background-color:#ffff99;
    text-decoration:none;
    }


    /*"""""""" (SUB) Active State""""""""*/    
    body #qm0 div .qmactive, body #qm0 div .qmactive:hover    
    {    
        color:#ffff00;
        text-decoration:none;
    }

HTML:


<html>
<head>
<title>Fixed header and footer for IE</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="menu.css" rel="stylesheet" type="text/css" />

</head>
<body>
<div id="outer"> 
  <div id="contain-all"> 
    <div class="spacer"></div>
    <div id="inner"> 
      <div id="main-content"> 
        <p>Test text</p>
        <p>some text to wrap : some text to wrap : some text to cause scrolling 
          : : some text to wrap : some text to wrap : some text to cause scrolling 
          : : some text to wrap : some text to wrap : some text to cause scrolling 
          : : some text to wrap : some text to wrap : some text to cause scrolling 
          : : some text to wrap : some text to wrap : some text to cause scrolling 
          : : some text to wrap : some text to wrap : </p>
        <p>some text to cause scrolling : </p>
        <p>some text to cause scrolling : </p>
        <p>some text to cause scrolling : </p>
        <p>some text to cause scrolling : </p>
        <p>some text to cause scrolling : </p>
        <p>some text to cause scrolling : </p>
        <p>some text to cause scrolling : </p>
        <p>some text to cause scrolling : </p>
        <p>some text to cause scrolling : </p>
        <p>some text to cause scrolling : </p>
        <p>some text to cause scrolling : </p>
        <p>some text to cause scrolling : </p>
        <p>some text to cause scrolling : </p>
        <p>some text to cause scrolling : </p>
        <p>some text to cause scrolling : </p>
        <p>some text to cause scrolling : </p>
        <p>some text to cause scrolling : </p>
        <p>some text to cause scrolling : </p>
        <p>some text to cause scrolling : </p>
        <p>some text to cause scrolling : </p>
        <p>some text to cause scrolling : </p>
        <p>some text to cause scrolling : </p>
        <p>some text to cause scrolling : </p>
        <p>some text to cause scrolling : </p>
        <p>some text to cause scrolling : </p>
        <p>some text to cause scrolling : </p>
        <p>some text to cause scrolling : </p>
        <p>some text to cause scrolling : </p>
        <p>some text to cause scrolling : </p>
        <p>some text to cause scrolling : </p>
        <p>some text to cause scrolling : </p>
        <p>some text to cause scrolling : </p>
        <p>some text to cause scrolling : </p>
        <p>some text to cause scrolling : </p>
        <p>some text to cause scrolling : </p>
        <p>some text to cause scrolling : </p>
        <p>some text to cause scrolling : </p>
        <p>some text to cause scrolling : </p>
        <p>some text to cause scrolling : </p>
        <p>some text to cause scrolling : </p>
        <p>some text to cause scrolling : </p>
        <p>some text to cause scrolling : </p>
        <p>some text to cause scrolling : </p>
        <p>some text to cause scrolling : </p>
        <p>some text to cause scrolling : </p>
        <p>some text to cause scrolling : </p>
        <p>some text to cause scrolling : </p>
        <p>some text to cause scrolling : </p>
        <p>some text to cause scrolling : </p>
        <p>some text to cause scrolling : </p>
        <p>some text to cause scrolling : </p>
        <p>some text to cause scrolling : </p>
        <p>Last bit of text</p>
      </div>
    </div>
    <div class="spacer"></div>
  </div>
</div>
<div id="top-bar"> 
  <div id="topbar-inner"> 
    <div class="mid-content"><ul id="qm0" class="qmmc">

    <li><a class="qmparent" href="javascript:void(0)">Home</a>    </li>
    <li><a class="qmparent" href="javascript:void(0)">Academics</a>

        <ul>
        <li><a href="javascript:void(0)">Academic Life</a></li>
        <li><a href="javascript:void(0)">Strength's Based Education</a></li>
        <li><a href="javascript:void(0)">Elementary</a></li>
        <li><a href="javascript:void(0)">Middle School</a></li>
        <li><a href="javascript:void(0)">High School</a></li>
        <li><a href="javascript:void(0)">Our Teachers</a></li>
        <li><a href="javascript:void(0)">Guidance</a></li>
        </ul>
    </li>

    <li><a class="qmparent" href="javascript:void(0)">Admissions</a>

        <ul>
        <li><a href="javascript:void(0)">Profile</a></li>
        <li><a href="javascript:void(0)">Principal</a></li>
        <li><a href="javascript:void(0)">Tuition</a></li>
        <li><a href="javascript:void(0)">International</a></li>
        <li><a href="javascript:void(0)">Visit Us</a></li>
        </ul>
    </li>

    <li><a class="qmparent" href="javascript:void(0)">Our Community</a>

        <ul>
        <li><a href="javascript:void(0)">SRCS Community</a></li>
        <li><a href="javascript:void(0)">History</a></li>
        <li><a href="javascript:void(0)">Mission & Vision</a></li>
        <li><a href="javascript:void(0)">Statement Of Faity</a></li>
        <li><a href="javascript:void(0)">New Campus</a></li>
        <li><a href="javascript:void(0)">Parents</a></li>
        <li><a href="javascript:void(0)">Before & After School Care</a></li>
        </ul>
    </li>

    <li><a class="qmparent" href="javascript:void(0)">Activities</a>

        <ul>
        <li><a href="javascript:void(0)">Calendar</a></li>
        <li><a href="javascript:void(0)">Events</a></li>
        <li><a href="javascript:void(0)">Theater</a></li>
        </ul>
    </li>
    <li><a class="qmparent" href="javascript:void(0)">Athletics</a>

        <ul>
        <li><a href="javascript:void(0)">SRCS Atletics</a></li>
        <li><a href="javascript:void(0)">Sports Offered</a></li>
        <li><a href="javascript:void(0)">Coaches</a></li>
        </ul>
    </li>

    <li><a class="qmparent" href="javascript:void(0)">Giving</a>

        <ul>
        <li><a href="javascript:void(0)">Donations</a></li>
        <li><a href="javascript:void(0)">Volunteering</a></li>
        <li><a href="javascript:void(0)">Fundraising</a></li>
        </ul>
    </li>
    <li><a class="qmparent" href="javascript:void(0)">Contact</a>

        <ul>
        <li><a href="javascript:void(0)">Contact Us</a></li>
        <li><a href="javascript:void(0)">Directions</a></li>
        <li><a href="javascript:void(0)">Statement Of Faity</a></li>
        <li><a href="javascript:void(0)">New Campus</a></li>
        <li><a href="javascript:void(0)">Parents</a></li>
        <li><a href="javascript:void(0)">Before & After School Care</a></li>
        </ul>
    </li>

<li class="qmclear">&nbsp;</li></ul>
</div>
  </div>
</div>
<div id="footer"> 
  <div id="footer-inner"> 
    <div class="mid-content">Footer</div>
  </div>
</div>
</body>
</html>
2

Try removing the overflow setting from #top-bar.

3

That looks like some code from a very old demo of mine. As Centauri already mentioned the original has overflow:visible applied to the top-bar.


#top-bar{
	position:absolute;/* ie6 will treat this as fixed because of a bug where overflow:auto is set on a parent */
	top:0px;
	left:0px;
	height:50px;
	width:100&#37;;
	margin:0;
	padding:0;
	z-index:999;
	[B]overflow:visible;[/B]
}

Otherwise the dropdown will never show.:slight_smile:

(I really should update that page as the ie5 hacks are very messy and support for ie5 should be dropped now.)

4

Paul,

It is some code of yours. I found it on your site, and it fit perfectly for what I was doing. Thank you so much for putting this up, so novices like myself can learn. The fix that you posted worked perfectly. Thanks again for all your help with this. I will keep checking back for more updated code.