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;
}

但是当我选择一个子菜单项时，该项突出显示，我不想这样。当我点击子菜单项时，我只想突出显示没有子菜单项的祖先或父级。

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

.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 dot 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的菜单项

1 个答案: