How to fix this JQuery dropdown menu?

Question

Hi Guys,

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

  });

and the demo is here: JQuery Dropdown Menu

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.

Answer 3

The problem is, that the border is "outside" the box. It helps if you just move up the dropdown menu by 1 pixel so it overlaps the menu bar by that 1 pixel.

Simply change the top position of the dropdown menu in your CSS from 30px to 29px like that:

  ul li ul {
   border: none;
   position: absolute;
   top: 29px; /* <-- was 30px */

Answer 4

It works fine on my version of Firefox 1.5.0.1 Perhaps you don't have the latest version. I run an image gallery myself, but I don't think type of layout would artı work very well for me as I have descriptions for my images and some of the images are quite large. I don't know, it might be worth experimenting with.