引导下拉菜单在处理根目录中的页面时为文件夹中的页面损坏.这两个组php_include相同的外部头文件

我在工作时运行一些网络的东西，在这方面不是特别有经验。我不知道我所经历的过程的哪个因素导致了打嗝，所以如果你忍耐我，我会尝试深入解释。

最近我们的网站（基本引导模板）已经开始从几个页面扩展，为了保持领先地位，我选择将页眉和页脚文件拉到它们自己的包含文件夹中，然后使用......

<!--Header include-->
<?php $path = $_SERVER['DOCUMENT_ROOT'] . "/includes/"; include ( $path . 'header.html' ); ?>

。以便于管理。浏览了网站并删除了旧代码并将页面扩展更改为 php（现在开始在 MAMP 上测试网站）。该网站的结构是75%的页面位于根目录中，25%位于名为服务的文件夹中。所有页面都拉取相同的标题.html到目前为止一切顺利。

当我测试网站时出现问题。所有位于根 （public_html） 中的页面都按预期工作，标题中包含的导航下拉菜单工作正常。但是，当您单击位于/services/中的任何页面时，下拉列表（并且仅下拉列表）会中断。通过休息，我的意思是鼠标悬停时应该出现一个下拉列表，但它没有。 所有其他CSS，主题，图片滑块的代码都可以正常工作。对于位于/services/文件夹中的这些页面，导航栏的这个元素只是中断的。

我通过检查它们来比较工作页面和损坏页面的元素 火狐，这是我唯一能看到任何差异的地方。

在工作页面上，工作下拉 html 显示为...

ul class="dropdown-menu bold" style="display:none;"

使用CSS规则...

element {
    display: none;
}
.navbar .nav li .dropdown-menu {
    z-index: 1000;
}
header ul.nav li ul {
    z-index: 1000;
    margin-top: 20px;
}
.bold {
    font-weight: 900;
}
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0px;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 180px;
    padding: 0px;
    margin: 2px 0px 0px;
    list-style: outside none none;
    background: none repeat scroll 0% 0% #343434;
    box-shadow: none;
    border-right: 2px solid #302F2F;
    border-width: medium 2px 2px;
    border-style: none solid solid;
    border-color: -moz-use-text-color #302F2F #302F2F;
    -moz-border-top-colors: none;
    -moz-border-right-colors: none;
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    border-image: none;
}
.dropdown-menu {
    border-radius: 0px;
}
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0px;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0px;
    margin: 2px 0px 0px;
    list-style: outside none none;
    background-color: #FFF;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
    background-clip: padding-box;
}
ul ul, ul ol, ol ol, ol ul {
    margin-bottom: 0px;
}
ul ul, ul ol, ol ol, ol ul {
    margin-bottom: 0px;
}
ul, ol {
    padding: 0px;
    margin: 0px 0px 10px 25px;
}
ul, ol {
    padding: 0px;
    margin: 0px 0px 10px 25px;
}
li {
    line-height: 1.6em;
}
li {
    line-height: 20px;
}
.nav {
    list-style: outside none none;
}
body {
    font-family: "Open Sans",sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6em;
    color: #656565;
}
body {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #333;
}
html {
    font-size: 100%;
}

损坏的页面显示 html 的...

<ul class="dropdown-menu"></ul> <<< I think this might be a red flag??

和CSS的....

element {
}
.navbar .nav li .dropdown-menu {
    z-index: 1000;
}
header ul.nav li ul {
    z-index: 1000;
    margin-top: 20px;
}
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0px;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 180px;
    padding: 0px;
    margin: 2px 0px 0px;
    list-style: outside none none;
    background: none repeat scroll 0% 0% #343434;
    box-shadow: none;
    border-right: 2px solid #302F2F;
    border-width: medium 2px 2px;
    border-style: none solid solid;
    border-color: -moz-use-text-color #302F2F #302F2F;
    -moz-border-top-colors: none;
    -moz-border-right-colors: none;
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    border-image: none;
}
.dropdown-menu {
    border-radius: 0px;
}
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0px;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0px;
    margin: 2px 0px 0px;
    list-style: outside none none;
    background-color: #FFF;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
    background-clip: padding-box;
}
ul ul, ul ol, ol ol, ol ul {
    margin-bottom: 0px;
}
ul ul, ul ol, ol ol, ol ul {
    margin-bottom: 0px;
}
ul, ol {
    padding: 0px;
    margin: 0px 0px 10px 25px;
}
ul, ol {
    padding: 0px;
    margin: 0px 0px 10px 25px;
}
li {
    line-height: 1.6em;
}
li {
    line-height: 20px;
}
.nav {
    list-style: outside none none;
}
body {
    font-family: "Open Sans",sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6em;
    color: #656565;
}
body {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #333;
}
html {
    font-size: 100%;
}

（我可以手动将 Firefox inspect 中损坏的下拉列表更改为元素 { display：inline }，然后下拉列表会重新出现，并带有指向其他页面的工作链接。

总的来说，我不明白为什么会发生这种情况。

• 所有其他CSS都在损坏的页面上工作，因此指向该位置的链接必须有效。
• 所有页面共享相同的标题.html该标题使用相同的 html 来创建工作下拉列表。
• 所有 CSS 都在 head 中每个页面的开头单独调用（而不是在标头.html文件中）。
• 如果所有页面都查看相同的头文件，并且它们都指向相同的 CSS，我如何获得不同的结果？

谢谢