將水平導航欄的其餘部分設置爲其他顏色？

Question

原諒我沒有創建一個jsfiddle。我希望這對經驗豐富的人來說是相當簡單的。

在this site，我希望能夠通過綠色區域下面的圖片中指定的區域，有相同的背景，黑色登錄導航按鈕（#menu-item-661），這是https://www.wascc.com.au/wp-content/themes/WASCC/images/sign-shap.jpg。 （網站上的綠色區域是黃色）

我已經試過：

#menu-item-661::after { 
    content: "<img src="images/sign-shap.jpg" width="100%" />" 
} 

，沒有工作，並且：

#menu-item-661::after { 
    content: "<li id="black-tab">&nbsp;</li>"; 
} 
#black-tab { 
    background-image: "images/sign-shap.jpg"; 
    width: auto;  
} 

裏面也沒有工作和：

nav { 
    width: auto; 
} 

哪個沒有用。

幫助讚賞。

Answer 1

的黃色背景添加到您的li元素是這樣的：

ul#menu-not-logged-in li { 
    font: 16px/51px oswaldregular; 
    color: #48391f; 
    background: url(/images/navi-shap.jpg) 0 0 no-repeat; 
    float: left; 
    text-transform: uppercase; 
    position: relative; 
    background: url(images/navigation-bg.jpg) repeat-x; 
} 

和黑色的背景添加到您的整個導航這樣的：

nav { 
height: 51px; 
    margin: 0; 
    background: url(images/sign-shap.jpg) repeat-x; 
    font: 16px/51px oswaldregular; 
    width: auto; 
} 

然後你擁有了它，就像在你的屏幕截圖

EDIT箭頭：

#menu-not-logged-in li .sub-menu li::before { 
    content: "\203A"; 
    position: absolute; 
    color: white; 
    margin: -11px 0 0 10px; 
}