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

Question

我正在使用 22-12 主题使用 Wordpress 创建一个网站，主菜单有一个 'Sales Items' 选项卡。

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

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

谁能告诉我正确的 CSS 用法？

谢谢！

Answer 1

您可以为销售商品标签指定 class，这将需要编辑 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

要仅更改此特定 "sales items" 选项卡，您可以在样式表中使用 ID #menu-item-579 或 class .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 或 class。这似乎有点问题，因为它没有唯一的 class。解决方法是使用主菜单的唯一class/id。

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

我希望这或多或少是您的想法。 GL!

Change Color of a Link (Tab) that has Drop Down List on WP Nav Menu with CSS