jQuery hover slide up but show first list item always

I've been mucking around with this jsfiddle code but can't get it to do what I want, in fact I don't think it's possible the way I've done it so would be open to new suggestions.

http://jsfiddle.net/Gw开发者_如何学编程Buj/118/

On Hover I want the list of items to slide up, which it does, but I would like it to always show the first list item just above the button before hover, then on hover slide up the rest of the list. But because it's using display:none I can't figure out a way to allow it to show the first list item.

Just had a quick go, is this along the right lines of what you want to do? http://jsfiddle.net/cUFNR/

Just only for having a better behaviour, use stop() to avoid unwanted effects when multiple hovering:

http://jsfiddle.net/cUFNR/2/

  $('.button').hover(
    function() {
        $(".slide").stop().animate({height:'100px'}, 500);
    }, function() {
        $(".slide").stop().animate({height:'20px'}, 500);
    });