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

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

CSS3和菜单项突出显示

1 个答案: