Adding a delay to submenu dropdown - bootstrap3

Question

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

Answer 1

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!