jQuery Navigation Menu Assistance?

[Kiail]

Hello, I am needing assistance with a simple navigation menu. It's a jquery menu and I'm trying to kind of flip it's direction in a way. Basically I'm needing it to look similar to this


here is what it is right now https://dl.dropbox.com/u/57922856/ea...ated-menu.html

Here is my js code.

$(document).ready(function(){  
  
    //When mouse rolls over  
    $("li").mouseover(function(){  
        $(this).stop().animate({height:'150px'},{queue:false, duration:200, easing: 'easeOutBounce'})  
    });  
  
    //When mouse is removed  
    $("li").mouseout(function(){  
        $(this).stop().animate({height:'50px'},{queue:false, duration:200, easing: 'easeOutBounce'})  
    });  
  
});

here is my css

ul{  
    margin:0;  
    padding:0;  
	
}  

li{  
    width:100px;  
    height:50px;  
    float:left;  
    color:white;  
    text-align:center;  
    overflow:hidden;  
}  
  
a{  
    color:#FFF;  
    text-decoration:none;  
}  
  
p{  
    padding:0px 5px;  
}  
  
    .subtext{  
        padding-top:15px;  
    }  
  
/*Menu Color Classes*/  
.green{background:black;}
.yellow{background:black;}
.red{background:black;}
.purple{background:black;}
.blue{background:black;}

Think you can help a guy out with this?

[SB65]

Seems like you just need to animate the margin-top as well as the height of the elements. Something like:

    <script type="text/javascript">
$(document).ready(function(){  
  
    //When mouse rolls over  
    $("li").mouseover(function(){  
        $(this).stop().animate({height:'150px',marginTop:'-100px'},{queue:false, duration:200, easing: 'easeOutBounce'})  
    });  
  
    //When mouse is removed  
    $("li").mouseout(function(){  
        $(this).stop().animate({height:'50px',marginTop:0},{queue:false, duration:200, easing: 'easeOutBounce'})  
    });  
  
});	</script>

You might need to give your menu a bit more space at the top to fit it in.