Menu dinamico non funziona

[francescocorr]

Salve a tutti, ho scaricato uno script di un menù dinamico e vorrei applicarlo al mio foglio di stile che ho precedentemente creato, purtroppo non riesco a richiamarlo (data la mia assoluta ignoranza in js). Potreste darmi una mano a capire?

CSS Scaricato

#navigation-block {
	position:relative;
	top:200px;
	left:200px;
}
 
#hide {
	position:absolute;
	top:30px;
	left:-190px;
}
 
ul#sliding-navigation
{
	list-style: none;
	font-size: .75em;
	margin: 30px 0;
	padding: 0;
}
 
ul#sliding-navigation li.sliding-element h3,
ul#sliding-navigation li.sliding-element a
{
	display: block;
	width: 150px;
	padding: 5px 18px;
	margin: 0;
	margin-bottom: 5px;
}
 
ul#sliding-navigation li.sliding-element h3
{
	color: #fff;
	background:#333 url(heading_bg.jpg) repeat-y;
	font-weight: normal;
}
 
ul#sliding-navigation li.sliding-element a
{
	color: #999;
	background:#222 url(tab_bg.jpg) repeat-y;
	border: 1px solid #1a1a1a;
	text-decoration: none;
}
 
ul#sliding-navigation li.sliding-element a:hover { color: #ffff66; }

Quindi il file che richiamo js è

$(document).ready(function()
{
	slide("#sliding-navigation", 25, 15, 150, .8);
});
 
function slide(navigation_id, pad_out, pad_in, time, multiplier)
{
	// creates the target paths
	var list_elements = navigation_id + " li.sliding-element";
	var link_elements = list_elements + " a";
	
	// initiates the timer used for the sliding animation
	var timer = 0;
	
	// creates the slide animation for all list elements 
	$(list_elements).each(function(i)
	{
		// margin left = - ([width of element] + [total vertical padding of element])
		$(this).css("margin-left","0px");
		// updates timer
		timer = (timer*multiplier + time);
		$(this).animate({ marginLeft: "0" }, timer);
		$(this).animate({ marginLeft: "0px" }, timer);
		$(this).animate({ marginLeft: "0" }, timer);
	});
 
	// creates the hover-slide effect for all link elements 		
	$(link_elements).each(function(i)
	{
		$(this).hover(
		function()
		{
			$(this).animate({ paddingLeft: pad_out }, 150);
		},		
		function()
		{
			$(this).animate({ paddingLeft: pad_in }, 150);
		});
	});
}

Invece il mio css è:

#navigation {
	float:left;
	list-style: none;
	font-size: 13px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	margin: 30px 0;

}
 
div#navigation ul{
	list-style-type: none;
	margin: 0;
}

div#navigation li{
	color: #999;
	background:#222 repeat-y;
	border: 1px solid #1a1a1a;
	text-decoration: none;
} 

div#navigation a{
	display: block;
	width: 185px;
	line-height: 30px;
    text-decoration: none; 
	text-indent: 30px;
    color: #ffffff;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:13px;
}

div#navigation a:hover{
	color: #ffff66;
	/*padding-left:15px;*/
}

div#navigation li#activelink a{
	color: #ffff66; 
	/*padding-left:0px;*/
}

Logicamente c'è anche un file jquery ma non credo si debbano apportare modifiche li.

Sono andato a cambiare questa riga di codice

slide("#sliding-navigation", 25, 15, 150, .8); con
slide("#navigation", 25, 15, 150, .8);

Ma l'effetto purtroppo non viene richiamato.

Potreste darmi una mano? cosa devo cambiare?

Grazie Francesco

[cavicchiandrea]

Ma sono due css diversi, per me devi ricopiarlo uguale togliendo il div#..... mettendo gli elenchi puntati come sono scritti nell'originale, ritengo che le unica cose che puoi cambiare sono colori, anche posizioni e attributi dell'elemento per me non vanno modificati.