CSS3 和菜单项突出显示

Question

我正在尝试制作一个简单的侧边栏菜单，当当前查看其链接页面时，其菜单项会设置样式或突出显示。我一直在努力使其尽可能紧凑和简单，但我无法使突出显示/样式化效果发挥作用。

这是代码:

HTML

<div class="navmenu">
<ul class="navmenu1">
<li><a href="url1">home</a></li>
<li><a href="url2">about us</a></li>
<li><a href="url3">services</a>
<ul>
<li><a href="url3a">option 1</a></li>
<li><a href="url3b">option 2</a></li>
<li><a href="url3c">option 3</a></li>
</ul>
</li>
<li><a href="url4">contact us</a></li>
<li><a href="url5">gallery</a></li>
</ul>

CSS

.navmenu ul {
    margin:5px 0 0 0;
   padding:0;
   font:bold 13px verdana;
   width:250px;
}
.navmenu li a {
    margin-top:-5px;
    display:block;
    text-decoration:none;
    padding:14px 10px 16px;
    border-bottom:.5px dotted #cccccc;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out,;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out 0s;
}
.navmenu a:hover, .navmenu a:active {
    color:white;
    background-color:blue;
}
.navmenu li.menu-item.current_page_item > a, 
.navmenu li.menu-item.current-menu-item > a {
    color:green;
} 

/* submenu */
.navmenu ul li ul {
    margin-left:-1px;
    text-indent:20px;
}

我一直在无休止地尝试突出显示当前页面/当前菜单项，但似乎没有任何效果。我用 .current-menu-item 和 .current_page_item 尝试了不同的代码迭代，但没有。

Answer 1

您可以使用 wordpress 默认类 .current-menu-parent 或 current-menu-ancestor。对我有用的代码如下。您只需将它们添加到您的 style.css 即可。

.current-menu-parent a, .current-menu-ancestor a {

  color: #7dca8d;

    }

或者你也可以试试这个。这对我也有用。

.navmenu  .current-menu-ancestor > a {
background-color: #B44A52;
color: #fff;
}

这样当访问子菜单项页面时，其父菜单将以红色突出显示。