jQuery dropdown delay on hover not working in bootstrap

Question

I got the delay working using the jQuery script, but I needed to change my html so its now not the bootstrap standard dropdown, however its only a few positional changes and class changes so not sure why it's not delaying. I want the delay to be on the telephone number dropdown... http://bootply.com/67110

Javascript

$("ul.dropdown").hover(function() {
    $(this).find(".dropdown-menu").stop(true, true).delay(350).fadeIn();
}, function() {
    $(this).find(".dropdown-menu").stop(true, true).delay(200).fadeOut();
});

HTML

<ul class="pull-right dropdown inline"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><li>Call us on 0844 873 0070 <b class="caret"></b></a>
    <ul class="dropdown-menu">
        <li><a href="#">Second level link</a></li>
        <li><a href="#">Second level link</a></li>
        <li><a href="#">Second level link</a></li>
        <li><a href="#">Second level link</a></li>
        <li><a href="#">Second level link</a></li>
    </ul></li>
</ul>

user694844 · Accepted Answer · 2013-07-11 13:32:08Z

2

Your css has

ul.dropdown:hover ul.dropdown-menu { 
display: block;
}

which automatically shows the menu. You either need to remove it, or narrow its scope to cover less items.

answered Jul 11, 2013 at 13:32

user694844

1,18711 silver badges16 bronze badges

I feel like an idiot! Forgot to remove that, I put that in before to drop it down without the delay grrrrr. Thanks
– Tom Rudge
Commented Jul 11, 2013 at 13:46

Add a comment |

Collectives™ on Stack Overflow

jQuery dropdown delay on hover not working in bootstrap

1 Answer 1

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Related