在子菜单下添加行

Question

我想在子菜单下添加一行，如下图所示。 我正在使用wordpress和上面的菜单组成的插件。到目前为止我尝试过的是，

1）使用CSS：

我已将border-bottom添加到子菜单菜单项列表中。但问题是border-bottom仅扩展到列表。下方图片会为您提供更多想法。

2）使用jQuery：

对于jQuery，我在主菜单代码之后添加了<hr>。就像这样：

    $( "<hr />" ).insertAfter( "#mega-menu-primary-2" );

    $("li.mega-menu-megamenu a").each(function () {
    $("li.mega-menu-megamenu a").hover(function(){
        $("ul.mega-sub-menu > li > a").show("fade", 5000);
        $("hr").css({"display":"block"});
    },
    function(){$("hr").css({"display":"none"});});
    });

    $("ul.mega-sub-menu").hover(function(){
        $("hr").css({"display":"block"});
    },
    function(){$("hr").css({"display":"none"});});

它的工作正常。但问题是，当我将鼠标悬停在子菜单项上时，行才会消失。我尝试了$("ul.mega-sub-menu > li >a").hover(function(){});，但问题仍然存在。

任何人都可以指导我吗？

注意：我也试过:after，但没有任何效果。

Answer 1

我认为你必须将边框底部添加到子菜单ul（un ordered list）而不是li elemnt，而hr也不是很好的解决方案。你可以将页面保存为HTML并上传到任何地方下载，以使问题可以理解