header div disappears only in firefox (on mouseover) - firefox

Question

I have a very odd glitch that only happens in firefox. The header div of my site will disappear from view only after the user has scrolled down the page and then moved the mouse on to the header nav. I have been searching for a couple of hours now on what piece of code I may be missing.
The site is not super dynamic as it does need to be so I don't think there is any Jquery/javascript with improperly formatted event listeners or anything. What I suspect the problem to be is something in the CSS code. I have done 3 different things for this site that I normally do not do. I used an absolutely positioned div, I used z-index and I constructed a CSS only nested menu structure in the nav.
While none of these things by themselves (except the ap div) is truly offensive in nature, I wonder if the combination of these 3 items is causing me a problem?
Here is the page structure for the header div and the governing CSS
<div id="header">
<div id="headwrap">
<div id="logo">
<img src="images/logo.png" height="35px" width="35px"/>
</div> <!-- end logo -->
<div id="logotitle" class="ie">
Cambridge Companies
</div> <!-- end logotitle -->
<div class="headnav">
<ul id="top-menu">
<li><span>Home</span></li>
<li> <span>Company</span>
<ul class="sub-menu">
<li>Overview</li>
<li>Our Mission</li>
<li>Meet the Team</li>
</ul>
</li>
<li> <span>Investments</span>
<ul class="sub-menu">
<li>Completed</li>
<li>Opportunities</li>
</ul>
</li>
<li><span>Services</span></li>
<li><span>Careers</span>
<ul class="sub-menu">
<li>VP of Business Development</li>
<li>Assistant</li>
<li>Intern</li>
</ul>
</li>
<li><span>Contact</span></li>
</ul>
</div> <!-- end headnav -->
<div id="address" align="right">
<strong>1.888.615.6166</strong><br/>9075 W. Diablo Dr., Las Vegas, NV 89148
</div> <!-- end address -->
</div> <!-- end headwrap -->
</div> <!-- end header -->
#header{
position:absolute;
/*background-color:#F90;*/ /* position testing */
background:url(../images/navigation-background.png) repeat;
width:100%;
height:50px;
z-index:2;
}
#logo{
display:inline-block;
padding-top:6px;
margin-left:80px;
}
#logotitle{
position:absolute;
/*background-color:#CC9900;*/ /* position testing */
display:inline-block;
color:#FFFFFF;
height:26px;
width:auto;
font-size:26px;
font-family:Arial, Helvetica, sans-serif;
margin-left:4px;
margin-top:10px;
}
.headnav{
/*background-color:#0099FF;*/ /* position testing */
display:inline-block;
/*margin-left:12px;*/
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
letter-spacing:1pt;
height:10px;
padding-bottom:24px;
margin-left:280px;
}
.navitem{
display:inline-block;
color:#ccb38b;
}
.navitem a:link{color:#ccb38b;}
.navitem a:visited{color:#ccb38b;}
.navitem a:hover{color:#FFF;}
.navitem a:active{color:#ccb38b;}
#address{
/*background-color:#99FF33;*/ /* position testing */
display:inline-block;
float:right;
margin-right:80px;
margin-top:9px;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color:#ccb38b;
}
#top-menu {
display:block;
float:left;
list-style:none;
margin:0;
padding:0;
}
#top-menu > li {
float:left;
display:block;
height:52px;
}
#top-menu > li > a {
color:#ccb38b;
font-size:12px;
text-decoration:none;
display:block;
}
#top-menu > li > a > span {
border-left:1px solid #ccb38b;
display:inline-block;
padding:0 12px;
height:12px;
margin:12px 0;
}
#top-menu > li:first-child > a > span {
border-left:0;
}
#top-menu > li:hover > a > span {
color:#fff;
text-decoration:none;
}
#top-menu li:hover .sub-menu {
display:block;
}
#top-menu .sub-menu {
position:absolute;
width:210px;
background:transparent url(../images/navigation-background.png) repeat;
list-style:none;
padding:0;
display:none;
margin:0;
margin-top:7px;
}
#top-menu .sub-menu a {
display:block;
padding:10px;
color:#ccb38b;
font-size:12px;
text-decoration:none;
}
#top-menu .sub-menu a:hover {
text-decoration:none;
color:#fff;
}
Any help, suggestions, comments on cleaning up my code or general thoughts are appreciated.

Answer 1

!UPDATE! -- I have solved the issue. At first I believed it was the z-index, however, changing this only made things worse. The problem was the positioning on the #header element. Since I had positioned it as "absolute" it was being rendered wrong. The fix was to change it to the following:
#header{
position:fixed; /* note that this changed to fixed instead of absolute */
/*background-color:#F90;*/ /* position testing */
background:url(../images/navigation-background.png) repeat;
width:100%;
height:50px;
z-index:2;
}
Once I changed the positioning, the header operated as designed. It sticks nicely to the top of the window regardless of scroll and does not disappear in firefox as previously reported.
I feel dumb that I did not think of this sooner, but hey that's how you learn right?
I hope this helps anyone else having the same problem.