css3 - jQuery dropdown delay on hover not working in bootstrap -

i got delay working using jquery script, needed change html not bootstrap standard dropdown, few positional changes , class changes not sure why it's not delaying. want delay on 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 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> 

your css has

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

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