[jQuery] Need help building a jQuery dropdown menu

[sammahoney]

Hi folks

I'm just starting out with jQuery. I want to make a simple 'ul'
dropdown menu to improve my understanding. The basic flow is this:

'ul.menu li ul' has display:none >> on hover of li, get & store height
of 'this' hidden ul >> set height of 'this' ul to 0 >> set display to
block >> animate height to original stored height

I know there are already some great plugins for dropdowns, but I
really want to roll my own to get a better understanding of jQuery.

So far I have managed the following, very badly done (see live version
here - http://jsbin.com/eduvi):

var $j = jQuery.noConflict();
$j(document).ready(function(){

// Get height of current hidden ul

        $j("ul.menu li").hover(function() {
          getHeight($j("ul", this).height());
        });
// Set height to 0px

    $j('ul.menu li').hover(function() {
    $j("ul", this).css({"height":"0px"});
});

// Set display to block

    $j('ul.menu li').hover(function() {
    $j("ul", this).css({"display":"block"});
});

// Animate height to stored height

    $j('ul.menu li').hover(function getHeight(h) {
    $j('ul:first', this).stop().animate({ "height" : "100%" } , 400 );
});

// Display height of current hidden ul

    function getHeight(h) {
      $j("div.test").text("The height for the hidden ul is " + h +
"px."); }
  });

I'd like to know how do I get it to use the stored original height, in
place of that 100%.

And secondly, I'm sure this can all be condensed down to just a few
lines, but don't really have a clue how to do that yet.

Any help very much appreciated!