Question

非常基本的CSS问题，因为我无法让当前页面在菜单中看起来不同。任何建议都非常感谢！

这是创世函数

//* Add My New Menu
function my_new_menu() {

echo '<ul class="menu gn responsive-menu">
<li class="menu-item"><a href="/kids-joke-book/"> New Joke Book!</a></li>
<li class="menu-item"><a href="/kids/"> Kids Jokes </a></li>
<li class="menu-item"><a href="/animal-jokes/"> Animal Jokes /a></li>
<li class="menu-item"><a href="/zoo-jokes/"> Zoo Jokes </a></li>
<li class="menu-item"><a href="/joke-contest/"> Contest </a></li>
</ul>';

}
add_action( 'genesis_header_right', 'my_new_menu' );

这是CSS

.gn a {
border: 1px solid transparent;
border-radius: 3px;
color: #438ed9;
display: block;
font-weight: 400;
height: auto;
line-height: 1;
margin-top: 0.2rem;
padding: 0.8rem 1rem;
position: relative;
text-decoration: none;
}

.gn a:hover,
.gn .current-menu-item > a,
.gn .sub-menu .current-menu-item > a:hover {
color: #fff;
background-color: #009900;
}

Answer 1

最简单的解决方案是将“.current”类添加到相应的“li”项。所以，例如，如果你在“儿童笑话书”页面上，你的“ul”应该是这样的：

<ul class="menu gn responsive-menu">
<li class="menu-item current"><a href="/kids-joke-book/"> New Joke Book! </a></li>
......
</ul>

您应该在使用此菜单的站点的每个子页面上执行此方法，并将“当前”类添加到正确的菜单项。（“current”类是一个示例名称，它具有您想要添加到右侧菜单项的样式。）

CSS当前菜单项 - ul li类

1 个答案: