突出显示当前页面 Wordpress 的菜单项

Question

我想用三角形突出显示当前页面的菜单项，我使用了这段代码

.current-menu-ancestor > a,
.current-menu-item > a,
.current-page-ancestor > a,
.current_page_item > a{
background-image:url(‘http://www.dailybodycare.dk/wp-content/uploads/2015/11/triunghi_rosu_meniu.svg’);
background-repeat:no-repeat;
background-position:center bottom;
}

但是当我 select 一个子菜单项时，那个项目是突出显示的，我不想要那个。当我单击子菜单项时，我只想突出显示没有子菜单项的祖先或父项。

我知道我应该使用这个代码

.main-navigation li.current_page_parent > a {
background-image:url(‘http://www.dailybodycare.dk/wp-content/uploads/2015/11/triunghi_rosu_meniu.svg’);
background-repeat:no-repeat;
background-position:center bottom;
}

或者这个

.main-navigation li.current-page-ancestor > a {
background-image:url(‘http://www.dailybodycare.dk/wp-content/uploads/2015/11/triunghi_rosu_meniu.svg’);
background-repeat:no-repeat;
background-position:center bottom;
}

我认为他们也有同样的想法，但我不确定如何正确编写代码。

这是我的网址 www dailybodycare dot dk

Answer 1

将 ul.menunav-menu > 添加到选择器的开头，这样它只会定位顶级链接。

例如，将您当前的选择器更新为：

ul.menunav-menu > .current-menu-ancestor > a, 
ul.menunav-menu > .current-menu-item > a, 
ul.menunav-menu > .current-page-ancestor > a, 
ul.menunav-menu > .current_page_item > a {
    background-image: url('http://www.dailybodycare.dk/wp-content/uploads/2015/11/triunghi_rosu_meniu.svg');
    background-repeat: no-repeat;
    background-position: center bottom;
}

突出显示当前页面 Wordpress 的菜单项

Highlighting the Menu Item for the Current Page Wordpress

css

navigation

wordpress

jquery

highlight