javascript - 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 中添加了类“blue”元素，但其他元素都没有“颜色”类:

<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. 现在查看菜单项所在的菜单结构。单击您要更改的菜单项灰色 block 右侧的向下箭头。
5. 在“导航标签”下方，您现在将有一个标有“CSS 类(可选)”的文本框。您可以在此处添加任何自定义类 - 只需准确输入类名，前面没有点，例如blue .
6. 保存您的菜单，当您现在在浏览器中查看页面源代码时，<li>菜单项的 s 应在类列表中包含您的颜色类。