[JQUERY]Effetto menu a tendina

[gaten]

Salve ragazzi,

ho un problema nel creare un menu a tendina con JQuery.

Praticamente io dovrei applicare alla mia pagina, l'effetto menu a tendina (elastica) come in questo esempio:
http://devsnippets.com/img/demo-jquery/demo4.html

Io ci ho provato, ma non và:

<script type="text/javascript">
	$(document).ready(function(){
		$('.title_rel').betterTooltip({speed: 150, delay: 300});
	});
</script>

<script type="text/javascript">
 $(document).ready(function() {

           
        $("ul.INTmenu_release li#vynil").mouseover(function(){ //When mouse over ...
        	   //Following event is applied to the subnav itself (making height of subnav 60px)
		      $(this).find('#all_releases').stop().animate({height: '60px', opacity:'1'},{queue:false, duration:1500, easing: 'easeOutElastic'})
		});
	
	    $("ul.INTmenu_release li#vynil").mouseout(function(){ //When mouse out ...
	          //Following event is applied to the subnav itself (making height of subnav 0px)
		      $(this).find('#all_releases').stop().animate({height:'0px', opacity:'0'},{queue:false, duration:1600, easing: 'easeOutElastic'})
		});

          	
        //menu itembackground color animation			
		$("li").hover(function() {
              $(this).stop().animate({ backgroundColor: "#C13D93"}, 600);},
           function() {
              $(this).stop().animate({ backgroundColor: "#333333" }, 600);
        });
		
});
</script>

<div id="top_release">
	<ul class="INTmenu_release">
    	<li id="vynil">VYNIL
			<!--<ul style="overflow: hidden; height: 0px; display: block; opacity: 0;" class="subnav">
			<li style="background-color: rgb(51, 51, 51);">Overview
			<li style="background-color: rgb(51, 51, 51);">Products
			<li style="background-color: rgb(51, 51, 51);">Services
			<li style="background-color: rgb(51, 51, 51);">Why Us[/list]-->
        	    
            
            
		
<li class="single_rel">[img]img/releases/rettangoloHMZ001.jpg[/img]
			<p class="title_rel" title="HMZ001 - Astin &amp; Synthek, Insert Coin continuo del testo che andrebbe fuori."><span class="grassetto">HMZ001</span> - Astin &amp; Synthek, Insert Coin...</p>
  			<li class="single_rel">[img]img/releases/rettangoloHMZ002.jpg[/img]
  			<p class="title_rel"><span class="grassetto">HMZ001</span> - Astin &amp; Synthek, Ze Pequeno...</p>
  			
		
            
            
            
        
        <li id="digital">DIGITAL[/list]
</div>

Praticamente, la pagina è questa:

<div id="top_release">
	<ul class="INTmenu_release">
    	<li id="vynil">VYNIL
        <li id="digital">DIGITAL[/list]
</div>

<li class="single_rel">[img]img/releases/rettangoloHMZ001.jpg[/img]
	<p class="title_rel">PRIMO CONTENUTO</p>
  	<li class="single_rel">[img]img/releases/rettangoloHMZ002.jpg[/img]
  	<p class="title_rel">SECONDO CONTENUTO</p>
  	

        
        ...

Quando clicco VYNIL, deve scendere un menu a tendina, quando clicco DIGITAL, deve scendere un altro menu a tendina.

grazie anticipatamente.