Html Wordpress将类添加到菜单使用我的主题 我使用的是WordPress主题，名为WordPress基金会V2，按3Press’< /P>

我正在使用WordPress仪表板中的自定义菜单，我想在“li”中添加一个类来更改子菜单的样式：

例如： 关于我们-将有一个包含四个子链接的子菜单，因此我想在子菜单中添加一个名为.fourNav的类，然后将每个'li'设置为25%

然后客户-将有2个子链接，所以我想在每个'li'中添加一个名为.twoNav的类，其宽度为50%

我还想为每个“li”添加另一个类，每个“li”都有一个背景图像

Wordpress菜单允许您添加类和将显示在菜单中的描述，但是当我检查元素时，类没有被应用

但是，当我在DOM中手动添加该类时，它会选择CSS并工作

如何在此主题中添加菜单系统的全部功能

这是我正在做的，但不是在上面添加类：

所以我想我需要的是一段php代码，让菜单系统能够处理我的主题。当我在仪表板中添加类时，我的主题不会应用它

这是以html格式输出的代码：-

<ul id="menu-main-nav" class="top-nav nav-bar hide-for-small">
 <li id="menu-item-5" class="has-flyout active">
 <a href="page link here">Home</a><a href="#" class="flyout-toggle"></a>
  <ul class="flyout" style="display: none;">
   <li id="menu-item-50"><a href="page link here">sub menu four</a></li>
   <li id="menu-item-51"><a href="page link here">sub menu three</a></li>
   <li id="menu-item-52"><a href="page link here">sub menu two</a></li>
   <li id="menu-item-53"><a href="page link here">sub menu one</a></li>
  </ul>
 </li>
</ul>

您必须直接编辑模板代码

我想曼努在

worpressdir/wp-content/themes/yourthemename/header.php

---

为了正确地编辑这篇文章，你需要掌握PHP和html的中等技能。祝你好运

进入外观->菜单->屏幕选项-然后执行以下操作

---

据我从您的需求中了解，这是它应该如何工作的：
1.当您将鼠标悬停在菜单项上时，它应该会得到一个新的类名。
2.当您将鼠标悬停在子菜单项上时，子菜单项和相应子菜单项的父元素都应获得新的类名

如果这是你想要的，请签出这个。我已经为此使用了jquery。检查这是否对你有帮助

HTML:

JQuery

$(function(){
    $(".menu-block").on("mouseover",function(){
        $(this).addClass('hovered');
    });
    $(".menu-block").on("mouseout",function(){
        $(this).removeClass('hovered');
    });
    $(".sb-menu-list").on("mouseover",function(){
        $(this).addClass('child-hovered');
        $(this).parents(".menu-block").addClass('parent-hovered');
    });
    $(".sb-menu-list").on("mouseout",function(){
        $(this).removeClass('child-hovered');
        $(this).parents(".menu-block").removeClass('parent-hovered');
    });
});

---

你能发布你的html结构吗？tooThis就是这样，但我的问题是——在我的WordPress dashboard>菜单中，它允许你向菜单项添加一个类。我添加了我的类，但没有拾取。如果我在DOM中手动添加类，我的CSS可以满足我的需要。问题是我的主题可能不支持菜单类选项？因此，我需要一个代码片段来让它工作，以允许我添加class@John您的

导航条ul

将有一个类名，对吗？那么，在这种情况下，您是否能够通过将JQuery中的“.menu block”替换为“your_navbar_class_name li”来获取所需的内容呢？您好，我已经在主帖子中添加了代码。如您所见，没有为li分配任何类。

.menu-bar{
    background-color:blue;
    width:100%;
    display:inline-block;
}

.menu-bar > li{
    display:inline-block;
    position:relative;

}
.sub-menu-block{
    display:none;
    position:absolute;
    top:20px;
    padding-left:0;
    width:75px;
    padding:10px 3px;
    background-color:#ccc;
}
.menu-bar > li:hover .sub-menu-block{
    display:block;
}
.sub-menu-block li{
    list-style: none;
    display:block;
    padding: 4px 0;
}
.sub-menu-block li:hover{
    background-color:red;
}

$(function(){
    $(".menu-block").on("mouseover",function(){
        $(this).addClass('hovered');
    });
    $(".menu-block").on("mouseout",function(){
        $(this).removeClass('hovered');
    });
    $(".sb-menu-list").on("mouseover",function(){
        $(this).addClass('child-hovered');
        $(this).parents(".menu-block").addClass('parent-hovered');
    });
    $(".sb-menu-list").on("mouseout",function(){
        $(this).removeClass('child-hovered');
        $(this).parents(".menu-block").removeClass('parent-hovered');
    });
});