Question

如何使用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目标和＆＃34;悬停元素。我做错了什么？

Answer 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/

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

使用css将背景颜色添加到活动菜单项

2 个答案: