無法將背景顏色應用於使用CSS的自定義導航

我不知道爲什麼或如何，但我似乎無法更改我的網站上的導航欄的背景顏色。我試圖創建自己的WHMCS模板與我的joomla模板內聯，並且無論我做什麼，背景顏色都不會改變？無法將背景顏色應用於使用CSS的自定義導航

我想整個導航欄背景轉換爲黑色。我可以將背景轉換爲黑色，但鏈接右側的位保持灰色。我感到困惑，並認爲它一定是我做的一些愚蠢的事情？

這是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; 
}

任何建議將是最受歡迎的。 Registers Donna

來源

2016-05-10 Dtorr1981

我看到它罰款你的網站，而無需在頭中的標頭的大小爲100％黑色的背景 –

目前它的罰款'float'。 **你應該刪除問題**。當浮動元素被摺疊爲自然寬度時，您可以看到它右側的「header」的灰色背景。 – Moob

啊，我不得不同意OP，它對我來說是白色的，刷新了該網站的垃圾，仍然是白色..重新調整窗口大小+刷新，仍然**白色**標題背景。 – argon

你需要clearfix導航，所以它有高度。你可以這樣做（你也可以將此到您的第一/頂部菜單 - .gkMenu）：

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

在此之後，導航都將有它的高度回來，你可以改變背景吧。

一個精簡版閱讀的話題：http://nicolasgallagher.com/micro-clearfix-hack/

來源

2016-05-10 14:33:42 MajeStic

無法將背景顏色應用於使用CSS的自定義導航

回答

相關問題