css – Vertical Mega Menu disappears too quickly after mouse leave


I have created a vertical menu on WordPress, but I’m having a problem because the Mega Menu is disappearing too quickly. As you can see in the image there is a gap between last category with menu shown on hover and the list must be ordered like that, so I have tried to add delay timer after mouse leave category tab so the visitor can click on the link. I still think that the best way is to add setTimer for delay after leaving cursor.
image of problem

Website link where I work: https://tdb.pfm.mybluehost.me/

What I have tried:


var timer = 0;
$(“ul.dropdown > li”).hover(function()
if (timer) clearTimeout(timer);
$(“ul.dropdown > li”).removeClass(“hover”);
$(“ul.dropdown > li ul”).css(‘visibility’, ‘hidden’);
$(‘ul:first’,this).css(‘visibility’, ‘visible’);
}, function()
var link = $(this);
timer = setTimeout(function(){
$(‘ul:first’,link).css(‘visibility’, ‘hidden’);
}, 5000);
$(“ul.dropdown li ul li:has(ul)”).find(“a:first”).append(” » “);

I have added this but not working, so during the search on internet it seems that the problem also can be solved using only css to set delay after mouse leave.

Enes Bajrami 1 year 2021-08-07T04:45:31-05:00 0 Answers 0 views 0

Leave an answer