如何在 WordPress 的动态引导导航栏菜单中选择特定列表项

Question

我为 WordPress 创建了一个动态引导导航栏菜单。要查看菜单设计，请访问此链接：https://dl.dropboxusercontent.com/u/211935016/images/created_menu.jpg

但仍有一些事情需要做。最重要的“特别促销”和“董事会认证”需要在他们周围有那个盒子，这样他们才能脱颖而出。要查看设计，请访问此链接：https://dl.dropboxusercontent.com/u/211935016/images/original_menu.jpg

这里是html代码：

<!-- Menu's Code for Twitter Bootstrap -->
<div class="navbar navbar-inverse container mainmenu" role="navigation">
<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse"   data-target=".navbar-collapse">
        <span class="sr-only">Toggle Naavigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="" >Navigation</a>
</div>
<div class="navbar-collapse collapse">
    <?php

    $args = array(
            'theme_location' => 'top-bar',
            'depth'          => 2,
            'container'      => false,
            'menu_class'     => 'nav navbar-nav',
            'walker'         => new Bootstrap_Walker_Nav_Menu()
    );
    wp_nav_menu($args);

    ?>
 </div>
 </div>
 <!-- Menu's Code for Twitter Bootstrap -->

这是css代码：

.mainmenu {background:#F2F0F1;border:none;margin-top:10px;margin-bottom:10px;}
.navbar-inverse .navbar-brand {color: #101010;}
.navbar-inverse .navbar-brand:hover {color: #101010;}
.navbar-inverse .navbar-toggle {border-color: #333333;background:#333333;}
.navbar-collapse {padding-right: 0px;padding-left: 0px;}
.navbar-brand {display:none;}
.mainmenu ul.navbar-nav {margin-left: -10px;}
.mainmenu ul.navbar-nav li {margin-top: 12px;margin-left: 10px;}
.mainmenu ul.navbar-nav li a {color:#101010;padding: 5px 2px;font-family: 'Open Sans', sans-serif;font-size:18px;}
.mainmenu ul.navbar-nav li a:hover {color:#fff;background:#13B4E3;}

我使用以下代码：http://pastebin dot com/S0UCDUYi in functions.php 文件来激活 WordPress 的引导导航栏菜单。

谁能帮我解决它？谢谢。

Answer 1

最简单的方法是在 Wordpress | 上为这两个菜单项添加一个新类。外观 |菜单页面。

为了确保您可以查看菜单 CSS 类：

• 进入菜单编辑页面
• 点击屏幕右上角的屏幕选项
• 在“显示高级菜单属性”下单击“CSS 类”

现在，在菜单中这两个页面的条目（“特别促销”和“董事会认证”）中，您可以添加一个新类，例如“突出显示”。

然后为该新类添加 css：

.highlight { background: blue ... }