使用CSS更改WP导航菜单上具有下拉列表的链接（选项卡）的颜色

Question

我正在使用Twenty-Twelve主题创建一个使用Wordpress的网站，主菜单中有一个“销售项目”选项卡。

当您将鼠标悬停在选项卡上时，它会在下拉列表中显示不同的销售项目类别，但我只想更改实际“销售项目”选项卡的颜色，而不是下拉列表中链接的颜色。

每次我尝试仅定位CSS中的“销售项目”菜单选项卡时，它也会更改所有下拉列表类别项的颜色。

任何人都可以告诉我使用正确的CSS吗？

我的网站是http://www.thecolourmarket.com

谢谢！

Answer 1

您可以为销售商品标签指定一个类，这需要编辑html，然后您的html将如下所示

<a class="targetsale" href="http://www.thecolourmarket.com/product-category/clothing/sale-items/">Sale Items</a>

然后你可以用css来定位它。

或者，如果您无法修改html，只需定位销售项目，然后定位子项目。 在你的情况下，CSS将看起来类似于此

li#menu-item-579 a{color:red;}   //targets sale items
li#menu-item-580 a{color:black;}  //targets coats & jackets

Answer 2

要仅更改此特定“销售商品”标签，您可以在样式表中使用id #menu-item-579或类.menu-item-579 。 我会在这里使用ID。

如果要更改文本颜色，可以添加：

#menu-item-579 a {
    color: #5bad13;
}

要更改背景颜色，您可以使用：

#menu-item-579 {
    background-color: #5bad13;
}

更改背景颜色时，您会注意到左右没有填充。 所以你可能也想添加它。

#menu-item-579 {
    background-color: #5bad13;
    padding: 0 13px;
}

但是，您会注意到子菜单不再正确定位。 您需要此特定子菜单的ID或类。 这可能看起来有点问题，因为它没有唯一的类。 解决方案是使用主菜单的唯一类/ id。

#menu-item-579 .sub-menu {
    margin-left: -13px;
}

我希望这或多或少是你的想法。 GL！