如何让网站导航菜单在对应页面保持hover样式效果？

你已经通过PHP代码给当前页面对应的<li>标签添加了active类，接下来只需要在CSS中让这个active类下的导航链接复用hover时的样式即可，具体操作如下：

1. 把Hover样式同步到Active状态 #

假设你原本的hover效果CSS代码类似这样：

.nav-efeito:hover {
  color: #2ecc71; /* 替换为你实际使用的绿色值 */
  border-bottom: 2px solid #2ecc71; /* 绿色小条样式 */
}

/* 如果是用伪元素实现的绿色小条，代码大概是这样 */
.nav-efeito:hover::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 2px;
  background-color: #2ecc71;
}

现在只需要将active状态的导航链接也纳入样式选择器范围：

/* 基础样式同步 */
.nav-efeito:hover,
.nav-item.active .nav-efeito {
  color: #2ecc71;
  border-bottom: 2px solid #2ecc71;
}

/* 伪元素样式同步（如果用了伪元素） */
.nav-efeito:hover::after,
.nav-item.active .nav-efeito::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 2px;
  background-color: #2ecc71;
}

2. 可选：优化Active类的位置（更简洁） #

你当前是给<li>标签加active类，也可以直接把active类加到<a>标签上，这样CSS选择器更直观：

<li class="nav-item">
  <a class="nav-link nav-efeito <?php echo is_page_active('home') ? 'active' : ''; ?>" href="<?php echo get_template_directory_uri(); ?>/home">Início</a>
</li>

对应的CSS可以简化为：

.nav-efeito:hover,
.nav-efeito.active {
  color: #2ecc71;
  border-bottom: 2px solid #2ecc71;
}

3. 验证PHP判断逻辑 #

你的is_page_active函数已经覆盖了静态页面和单文章页面的slug匹配，如果导航链接对应自定义文章类型的归档页，可以补充判断逻辑，比如：

function is_page_active($page_slug) {
    global $post;
    return is_page($page_slug) 
        || (is_singular() && get_post_field('post_name', $post) === $page_slug)
        || (is_post_type_archive('你的自定义类型') && $page_slug === '归档页slug');
}

内容的提问来源于stack exchange，提问作者IGOR BONFIM