Need help fixing this jQuery dropdown script

Question

Hi All

I'm working on a script for a dropdown menu. It's working fine so far, but I need to add one more thing and I can't figure it out. Here's the current script:

---

 $j('ul.menu > li').hover(

    function() { var ulHeight = $j('ul', this).height(); $j(this).children('ul').css({height: 0}).stop().animate({height: ulHeight}, 400); },
    function() { $j(this).children('ul').stop().animate({height: 0}, 400);   }
);

---

I need to to return the height of the UL to it's original size, and set the display to none, so it can run again. The way it is now, as the height is set to 0 on leaving, the next time the "ulHeight" is taken it's 0.

I tried it like this but no joy:

---

 function() { $j(this).children('ul').stop().animate({height: 0}, 400).css({height: ulHeight});   }

---

Anyone any ideas?

Answer 1

The default value for the height property is auto. You should set it to that, instead of 0, when hiding.

Answer 2

Your sub menus aren't showing at all...

but ultimately, why reinvent the wheel? http://css-tricks.com/simple-jquery-dropdowns/ or Superfish

---

The only thing I would suggest, now that I've looked at your new code, is replace

.css({"display": "block"});
.css({"display": "none"});

with

.show();
.hide();

respectively, and you could use .hover instead of .mouseenter and .mouseleave

Check it out here... I couldn't edit your code in jsbin (the edit window was 3 lines high and I couldn't scroll) so I reposted it to pastebin.