导航菜单显示多个项目的 .current_menu_item css

Question

有问题的网站是 www.valuetactics.com

我希望当前页面的菜单项链接为粗体和黄色。如果子页面是活动页面，则子链接项和父链接项都应为粗体和黄色。

目前主页上有多个黄色菜单项，而应该只是“主页”链接。我试过用

改变颜色

.main-navigation .current-menu-item > a{
color: yellow;
font-weight: bold;
}

.main-navigation .current-menu-ancestor > a{
color: white;
font-weight: bold;
}

 .main-navigation .current_page_ancestor > a {
color: green;
font-weight: bold;
}

我从默认扩展而来的：

    .main-navigation .current-menu-item > a, .main-navigation .current-menu-ancestor > a, .main-navigation .current_page_item > a, .main-navigation .current_page_ancestor > a {
    color: yellow;
    font-weight: bold;
}

我发现 .main-navigation .current-menu-item 控制当前页面的链接颜色，但我不明白为什么这也会影响具有任何子菜单项的所有其他菜单项。

这是 wordpress 上“twentytwelve”的子主题。

Answer 1

问题不在于您的 CSS。您有多个指向主页的顶级菜单项，因此 WordPress 应用程序也将 .current-menu-item 应用于这些菜单项。这是预期的适当行为。

将这些顶级菜单项更改为静态占位符，或将它们指向子项页面之一。