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

Question

相关站点是 www.valuetactics.com

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

目前主页上有多个黄色菜单项，应该是"Home" link。我试过用

改变颜色

.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 控制当前页面的 link 颜色，但我不明白为什么这也会影响所有其他有任何子项的菜单项菜单项。

这是 wordpress 上 "twentytwelve" 的子主题。

Answer 1

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

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

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

nav menu displaying .current_menu_item css for multiple items

css

wordpress

navigationbar