want to increase delay timmings for hover effect

Question

i have three level of ul li.

<ul>
  <li>
  <li>
     <ul>
        <li>
        <li>
           <ul>
             <li>  

I want to increase the hover timings i.e when i hover over the second level li the delay time for hover has to be increased until i reach its children i.e third level

Answer 1

Assuming you have javascripe code using mouseover()/mouseout() or hover(): Get the hoverIntent plugin and use element.hoverIntent(overfunc, outfunc)

Answer 2

When you're using jquery make sure you're using mouseenter and mouseleave instead of mouseover and mouseout in these cases. mouseover and mouseout fire even when entering a child element. If you have code to hide things, you wouldn't want it to run in a menu at that point, you want it to run when you leave the <li> completely and consider a child as still being inside...that's what mouseenter and mouseleave do :)

There's also a shortcut for this called .hover() which uses the mouseenter and mouseleave events like this:

$(selector).hover(mouseenterFunc, mouseleaveFunc);

Here's an example:

$("li").hover(function() {
  $(this).children("ul").slideDown();
}, function() {
  $(this).children().slideUp();
});

You can see the above code in a quick demo against your posted tree here