将水平导航栏的其余部分设置为另一种颜色？

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

然后就像你的截图一样

编辑箭头：

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