html - 无法使用 CSS 将背景颜色应用于自定义导航

Question

我不知道为什么或如何，但我似乎无法更改我网站上导航栏的背景颜色。我正在尝试使用我的 joomla 模板创建我自己的 WHMCS 模板，无论我做什么，背景颜色都不会改变？

The dev site is here

我想将整个导航栏背景转换为黑色。我可以将 的背景转换为黑色，但链接右侧的位保持灰色。我很困惑，认为这一定是我所做的愚蠢的事情？

这是我的菜单的 HTML:

<header id="gkHeader">
     <div>      
        <div class="gkPage" id="gkHeaderNav">
           <a href="https://www.sitewidedesign.co.uk/" id="gkLogo" class="cssLogo">Site Wide Design</a>
           <div id="gkMainMenu">
              <nav id="gkExtraMenu" class="gkMenu">
                 <ul class="gkmenu level0">
                    <li  class="first active"><a href="https://www.sitewidedesign.co.uk/"  class=" first active" id="menu120"  >Home</a></li>
                    <li ><a href="/k2/latest"  id="menu333"  >Blog</a></li>
                    <li ><a href="/faq"  id="menu458"  >FAQ</a></li>
                    <li ><a href="/login/login"  id="menu472"  >Login</a></li>
                    <li  class="last"><a href="/web-hosting"  class=" last" id="menu477"  >Hosting</a></li>
                 </ul>
              </nav>
           </div>
         </div>         
        <div class="gkPreHeader">
            <nav id="gkPreHeaderMenu" class="gkMenu">
                <ul>
                    <li  class="first active"><a href="/hosting/domainchecker.php"  class=" first active" id="menu300"  >Domains</a></li>
                    <li ><a href="hosting/domainchecker.php"  id="menu333"  >Blog</a></li>
                    <li ><a href="/hosting/knowledgebase.php"  id="menu458"  >Knowledgebase</a></li>
                    <li ><a href="/login/login"  id="menu472"  >Login</a></li>
                    <li  class="last"><a href="/hosting/clientarea.php"  class=" last"  >My Account</a></li>
                </ul>
            </nav>
        </div>             
    </div>

我想要黑色背景的是 gkPreHeader。我尝试了以下 css，但它不会影响整个 div，正如您在我的网站上看到的那样。

.gkPreHeader {
    float:left;
    clear:both;
    background-color:#000;
    overflow:auto;
}

我们非常欢迎任何建议。问候唐娜

Answer 1

您需要清除导航以使其具有高度。你可以这样做(你也可以将它应用到你的第一个/顶部菜单 - .gkMenu):

.gkMenu2:before, .gkMenu2:after {
    content: "";
    display: table;
}
.gkMenu2::after {
    clear: both;
}

在此之后，导航将恢复其高度，您可以将背景更改为它。

关于该主题的精简阅读:http://nicolasgallagher.com/micro-clearfix-hack/