菜单未为一项添加子类别,但可为其他Wordpress使用

时间:2019-06-27 12:52:49

标签: wordpress drop-down-menu

我有一个赤裸裸的wordpress主题。导航栏菜单中有6个项目/每个链接的文本,其中6、4个具有显示下拉菜单的子类别。

Menu nav bar

但是,当我向没有下拉列表/子类别的项目之一添加子类别时,它不会显示在我的网站上。

我已经保存并清除了缓存。

当我检查html代码时,我注意到成功与失败之间的区别。见下文:

成功的菜单项,下拉菜单中包含子类别:

<li id="menu-item-7726" class="who has-links menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-7726">
    <a href="/who-we-are/leadership-team/" data-unsp-sanitized="clean">Who We Are</a>
    <ul class="sub-menu">
        <li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-30">
            <a href="https://www.website.com/who-we-are/leadership-team/" data-unsp-sanitized="clean">Leadership Team</a>
        </li>
        <li id="menu-item-36" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-36">
            <a href="https://www.website.com/who-we-are/ireland/" data-unsp-sanitized="clean">Ireland</a>
        </li>
        <li id="menu-item-37" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-37">
            <a href="https://www.websitee.com/who-we-are/uk/" data-unsp-sanitized="clean">UK</a>
        </li>
    </ul>
</li>

未显示带有子类别的菜单项:

<li id="menu-item-23" class="menu-item menu-item-type-post_type menu-item-object-page current_page_parent current-menu-ancestor current-menu-parent current_page_ancestor menu-item-has-children menu-item-23">
    <a href="https://www.website.com/news-hub/" data-unsp-sanitized="clean">News Hub</a>
    <ul class="sub-menu">
        <li id="menu-item-11549" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-11549">
            <a href="/teampage/" aria-current="page" data-unsp-sanitized="clean">Get Social</a>
        </li>
    </ul>
</li>

当我在检查器中编辑html并将不成功的项目更改为此时,它会起作用:

<li id="menu-item-23" class="pj has-links menu-item menu-item-type-post_type menu-item-object-page menu-item-object-page menu-item-has-children menu-item-23">
    <a href="https://www.website.com/news-hub/" aria-current="page" data-unsp-sanitized="clean">News Hub</a>
    <ul class="sub-menu">
        <li id="menu-item-11481" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-11481">
            <a href="https://www.website.com/teampage/" data-unsp-sanitized="clean">Get Social</a>
        </li>
    </ul>
</li>



<li id="menu-item-23" class="pj has-links menu-item menu-item-type-post_type menu-item-object-page menu-item-object-page menu-item-has-children menu-item-23">
    <a href="https://www.website.com/news-hub/" aria-current="page" data-unsp-sanitized="clean">News Hub</a>
    <ul class="sub-menu">
        <li id="menu-item-11481" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-11481">
            <a href="https://www.website.com/teampage/" data-unsp-sanitized="clean">Get Social</a>
        </li>
    </ul>
</li>

Edit of HTML in inspector

我的问题是,如何/在哪里永久进行此编辑? TIA

添加了编辑CSS:

ul#menu-main li:hover:after {
width:100%;
}
ul#menu-main li.who:after {
left:-50px
}
ul#menu-main li.se:after {
left:-37px;
}
ul#menu-main li.se:hover:after {
width: 186%;   
}
ul#menu-main li.who:hover:after {
width: 160%;
}
#menu-main .pj.has-links .sub-menu {
left:60px;
}
ul#menu-main li a {
color:#fff;
display: inline-block;
}
.single ul#menu-main li a {
font-weight:500;
font-family: 'AvenirLTStd-Medium', sans-serif;
}
ul#menu-main li a:hover {
color:#ffee00;
}
ul#menu-main li.has-links {
position: relative;
}
ul#menu-main li.has-links a:after {
content: '';
background: url(img/chevron-down.svg) no-repeat center center;
width: 16px;
height: 16px;
background-size: 16px 16px;
display: inline-block;
position: relative;
top:2px;
margin-left:10px;
}
ul#menu-main li.has-links:hover a:after {
content: '';
background: url(img/chevron-active.svg) no-repeat center center;
width: 16px;
height: 16px;
background-size: 16px 16px;
display: inline-block;
position: relative;
top:2px;
margin-left:10px;    
}
ul#menu-main li.has-links:hover .sub-menu {
-webkit-transform: scale(1) translateX(-50%);
transform: scale(1) translateX(-50%);
visibility: visible;  
}

1 个答案:

答案 0 :(得分:0)

您的问题是,当您在没有任何的现有父母 menu-item下添加新的 menu-item时在其下的>子 menu-item中,has-links类未添加到该特定的父级 menu-item中。

这是 bizzare ,因为他们必须是生成此类的php function,并将其添加到每个成为父级menu-itemmenu-item放在子项之后menu-item
如果他们的php function除外,那么其他父母 menu-item怎么获得此类?

此外,您有一个php function,也许是同一个,它在has-links类之前生成一个类。 我们是谁 whomenu-item服务 semenu-item,是{{1 }}对于 PROJECTS pj来说,它不会为 NEWS HUB menu-item生成类父母
如果它们不是menu-item,那么另一个父级 php function是如何根据其名称/标签来获得这些类的呢?

您说:

  

我有一个裸体的wordpress主题

这是您正在开发的主题还是正在使用的主题?
假设这是您正在使用的主题,能否告诉我们它是哪个主题。

最后,为了使您的菜单正常工作,因为我没有您的menu-item代码,因此我将对所有父级使用WordPress添加的本机php CSS
在您提供的以上menu-item中,将每个CSS替换为has-links。应该可以用!
请记住,请使用child theme进行更改,否则将在您使用的主题的下一次更新中将其删除。