CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Tom Rudge
Tom Rudge

Reputation: 3272

Adding a delay to submenu dropdown - bootstrap3

I can add a delay to the normal bootstrap3 dropdown menu, but in this instance I only want the delay on the submenu I've created (which isn't out the bootstrap box) - however the jquery used should still work. I need the delay so users can move the cursor to it easily without it closing (because the cursor may drift outside the a:hover element).

Take a look at this bootply - http://bootply.com/101522 and please help or advise why this isnt working!

jQuery('li.dropdown-submenu').hover(function () {
    jQuery(this).find('ul.dropdown-menu').stop(true, true).delay(200).fadeIn();
}, function () {
    jQuery(this).find('ul.dropdown-menu').stop(true, true).delay(200).fadeOut();
});

Upvotes: 3

Views: 1593

Answers (1)

Steve Valliere
Steve Valliere

Reputation: 1892

You need to remove (from your CSS):

.dropdown-submenu:hover > .dropdown-menu{
    display:block;
}

This is causing it to show up instantly. I tried it in your bootply and it works perfectly.

Good Luck!

Upvotes: 3

Related Questions