在子菜单下方添加行

Question

I want to add line under the submenu like shown in below picture. I am using wordpress and above menu made up from the plugin.What I have tried so far is that,

1) With CSS:

I have added border-bottom to the submenu menu item list.But issue is border-bottom expand only to the list.Below image will give you more idea.

2) With jQuery:

For jQuery, I have added <hr> just after the main-menu code.Like this :

    $( "<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"});});

Its working fine.But issue is that, when I hover on sub menu items, line just gets disappears. I have tried $("ul.mega-sub-menu > li >a").hover(function(){}); , but still same issue.

Can anyone guide me ?

NOTE: I have also tried with :after but nothing works perfectly.

Answer 1

i think you have to add border bottom to submenu ul(un ordered list) not to the li elemnt and hr is not good solution also. pls can you save page as html and upload anywhere download able in order to make problem understandable