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

Question

我不知道为什么或如何，但我似乎不能改变我的网站上导航栏的背景颜色。我试图创建我自己的WHMCS模板与我的joomla模板内联，无论我做什么，背景颜色都不会改变？

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/