使用 css 为活动菜单项添加背景颜色答案

【问题标题】：Add background color to active menu item with css使用 css 为活动菜单项添加背景颜色
【发布时间】：2014-11-16 11:45:15
【问题描述】：

如何使用 css 为活动菜单项添加背景颜色（即当我单击关于链接并转到关于页面时，我希望活动菜单项具有红色背景）？

这是我在 Wordpress 中的代码：

<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
                              <ul class="nav navbar-nav">
                                <?php wp_nav_menu( array( 
                                        'theme_location' => 'main-menu',
                                        'menu_class' => 'nav navbar-nav'
                                ) ); ?>
                              </ul>
                            </nav>

这是我的 CSS：

.navbar-inverse .navbar-nav > li > a:visited {
    background: red !important;
}

但是这个css目标和“悬停元素。我做错了什么？

【问题讨论】：

嗯，我认为 WordPress CMS 会自动切换 active 类或类似的东西。因此，您只能针对这一类。如果你能提供一个已经生成的导航栏 HTML 的 sn-p，那就太好了。
你是对的，谢谢提醒！

标签： html css menu html-lists

【解决方案1】：

默认情况下，WordPress 菜单使用列表项输出此类：current-menu-item，因此您可以使用此方法来定位活动菜单项：

li.current-menu-item {
    background: $sec-color;
}

如果您的主题支持创建多个导航菜单，那么您的 CSS 需要更具体一些

#menu-main-pages li.current-menu-item {
background: #3FAEA5;
color:#fff;
}

来源： http://premium.wpmudev.org/blog/how-to-highlight-the-current-page-when-using-wordpress-navigation-menus/

【讨论】：

如何更改将鼠标悬停在导航栏项目上的颜色？

【解决方案2】：

我刚刚查看了一些 WordPress 网站，因此您可以尝试几个选项，因为如果菜单项处于活动状态，我不知道您的 WordPress 安装会触发哪个类。

选项 1：

.navbar-inverse .navbar-nav > li.current-page-item > a{
   background: red;
}

选项 2：

.navbar-inverse .navbar-nav > li.current-menu-item > a{
   background: red;
}

选项 3：

.navbar-inverse .navbar-nav > li a.current {
   background: red;
 }

【讨论】：