标题 div 仅在 Firefox 中消失（鼠标悬停时）

Question

我有一个非常奇怪的故障，它只发生在 Firefox 中。只有在用户向下滚动页面然后将鼠标移到标题导航后，我网站的标题 div 才会从视图中消失。我一直在寻找几个小时我可能会丢失的代码。

该站点不是超级动态的，因为它确实需要如此，所以我认为没有任何 Jquery/javascript 具有格式不正确的事件侦听器或任何东西。我怀疑问题出在 CSS 代码中。我为这个网站做了 3 件我通常不会做的不同的事情。我使用了绝对定位的 div，我使用了 z-index，并在导航中构建了一个仅 CSS 的嵌套菜单结构。

虽然这些东西本身（除了 ap div）都没有真正令人反感的性质，但我想知道这 3 个项目的组合是否会给我带来问题？

这是标题 div 和管理 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><a href="?page=home"><span>Home</span></a></li>
                <li> <a href="#"><span>Company</span></a>
                    <ul class="sub-menu">
                        <li><a href="?page=company">Overview</a></li>
                        <li><a href="?page=mission">Our Mission</a></li>
                        <li><a href="?page=team">Meet the Team</a></li>
                    </ul>
                </li>
                <li> <a href="#"><span>Investments</span></a>
                    <ul class="sub-menu">
                        <li><a href="?page=completed">Completed</a></li>
                        <li><a href="http://www.cambridgecompanies.us/wordpress/">Opportunities</a></li>
                    </ul>
                </li>
                <li><a href="?page=investments"><span>Services</span></a></li>
                <li><a href="#"><span>Careers</span></a>
                    <ul class="sub-menu">
                        <li><a href="?page=vp">VP of Business Development</a></li>
                        <li><a href="?page=assistant">Assistant</a></li>
                        <li><a href="?page=intern">Intern</a></li>                          
                    </ul>
                </li>
                <li><a href="?page=contact"><span>Contact</span></a></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;
}

感谢任何有关清理我的代码或一般想法的帮助、建议、cmets。

Answer 1

！更新！ ——我已经解决了这个问题。起初我认为它是 z-index，然而，改变它只会让事情变得更糟。问题是#header 元素上的定位。由于我将其定位为“绝对”，因此它被渲染为错误的。解决方法是将其更改为以下内容：

#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;
 }

一旦我改变了定位，标题按设计运行。无论滚动如何，它都能很好地贴在窗口顶部，并且不会像之前报道的那样在 Firefox 中消失。

我没有早点想到这个我觉得很愚蠢，但是嘿，你就是这样学习的吧？

我希望这可以帮助遇到同样问题的其他人。