Question

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

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

这是我的菜单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/

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

1 个答案: