Wordpress 菜单项不再显示当前页面样式

Question

除了一个（厨房）之外，我正在处理的网站上的 CSS 样式活动或悬停状态菜单项不再按要求显示。

如果您将鼠标悬停在 Kitchens 上，或者该页面处于活动状态，它会突出显示蓝色，但其他链接样式均无效。

Kitchens 菜单项应用了“blue”类，代码如下。

<li id="menu-item-48" class="blue menu-item menu-item-type-post_type             menu-item-object-page current-menu-item page_item page-item-8 current_page_item menu-item-48">    
<a href="http://wanderingcooks.com.au/commercial-kitchen-space/">Kitchens</a>
</li>

我对如何将其他正确的类添加到菜单项感到困惑。定义了样式，每个样式都应该是不同的颜色，我相信自从页面重命名后它就不起作用了。 Wordpress 管理员中有一个区域可以应用样式，但这也不好。 我感谢任何帮助。

Answer 1

“厨房”链接在其li 元素中添加了“蓝色”类，但其他链接都没有“颜色”类：

<ul id="menu-main-navigation" class="menu">    
    <li id="menu-item-7923" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7923">
        <a href="http://wanderingcooks.com.au/thank-truck-its-thursday/">What’s On</a>
    </li>
    <li id="menu-item-48" class="blue menu-item menu-item-type-post_type menu-item-object-page menu-item-48">
        <a href="http://wanderingcooks.com.au/commercial-kitchen-space/">Kitchens</a>
    </li>
    [...]

蓝色悬停效果仅添加到具有蓝色类的“li”元素中的链接：

.primary_nav_menu .menu-item.blue a:hover, .primary_nav_menu .menu-item.blue a:active {
    color: #25aae1;
}

要解决此问题，您需要将blue（或其他“颜色”类）添加到所有列表元素。

向您的菜单项添加自定义类

1. 在管理员中，转到外观 > 菜单
2. 点击右上角的“屏幕选项”标签 - 这将显示一个设置面板
3. 在“显示高级菜单属性”下，选中“CSS 类”复选框
4. 现在查看菜单项所在的菜单结构。单击要更改的菜单项灰色块右侧的向下箭头。
5. 在“导航标签”下方，您现在将拥有一个标有“CSS 类（可选）”的文本框。您可以在此处添加任何自定义类 - 只需准确输入类名，不要在前面添加点，例如blue。
6. 保存您的菜单，当您现在在浏览器中查看页面源代码时，您的菜单项的<li>s 应该在类别列表中包含您的颜色类别。