How to fix this JQuery dropdown menu?

Question

I tried to create a dropdown menu in JQuery, but it's proving quite difficult.

My code is here:

  $(document).ready(function(){

        $('ul li').mouseover(function()
        {
              $(this).children("ul").show();
        });
        $('ul li ul').mouseover(function()
        {
              $('ul li ul').show();
        }).mouseout(function(){
              $('ul li ul').hide();
        });

  });

Basically I want to hover over a list item and the sub ul to drop down, then I can hover over the list items and If the mouse goes off of the sub nav, the menu hides again.

thanks, Keith

UPDATE: I removed the border from the CSS and it works fine, so it appears the mouseout is triggered when I hover over the 1px border, quite weird.

Answer 1

you should use jQuery's hover() function as it avoids all sorta browser specific issues ..

Without a lick of testing I'd imagine the code would look something more like:

    $('.clearfix li').hover(function() {
          $('ul', this).show();
        }, function() {
          $('ul', this).hide();
        });

Answer 2

Are you aware of superfish? It is menu jQuery plug-in with excellent cross-browser support. It definitely doesn't have the problem you are experiencing. I haven't checked the source code, but the key difference is that it adds a delay on mouseout. This means that an action isn't triggered, unless the position of the cursor is steady for some time (default delay is 800ms). This will solve your problem and is also a good thing to implement, as it will make your menu more user-friendly.