css – Vertical Mega Menu disappears too quickly after mouse leave

Question

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.

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

What I have tried:

$(function()  { var timer = 0;$(“ul.dropdown > li”).hover(function()
{
if (timer) clearTimeout(timer);
$(“ul.dropdown > li”).removeClass(“hover”);$(“ul.dropdown > li ul”).css(‘visibility’, ‘hidden’);
$(this).addClass(“hover”);$(‘ul:first’,this).css(‘visibility’, ‘visible’);
}, function()
{
var link = $(this); timer = setTimeout(function(){$(link).removeClass(“hover”);
$(‘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.

0
2 months 2021-08-07T04:45:31-05:00 0 Answers 0 views 0