[Solved] i want to replace my main menu navigation to animation menu but i dont know how

<!-- start menu --><div id="menu"><ul>

<li><a href="#">Community Blog</a></li>
<li><a href="#">Rules</a></li>
<li><a href="#">About Prince</a></li>
<li><a href="#">Movies & Drama</a></li>
<li><a href="#">Hit Musics</a></li>
<li><a href="#">Lyrics</a></li>

</ul></div><!-- end menu -->

#menu { float: left; position: relative; top: 0; left: 0; overflow: hidden;}
#menu .colourful { display: block; position: absolute; background: #f0ad22; height: 38px; width: 85px; top: 4px; left: -100px; }
#menu ul { margin: 0; padding: 0; list-style: none; float: left; position: relative; top: 0; left: 0; z-index: 1; }
#menu li { float: left; margin: 0 1px 0 0; }
#menu a:link, #menu a:visited, #menu a:hover, #menu a:active { color: #000; text-align: center; display: block; border: solid; border-width: 4px 0 0; line-height: 40px; width: 85px; }
#menu li a:hover { text-decoration: none; color: #fff; text-shadow: 0 0 1px #999; }

jQuery(document).ready(function($) {

/* create the span tht will be animated across the menu*/
/* declare our many variables for easy ref*/

var $span = $('<span class="colourful"></span>');
$span.insertBefore($("#menu ul"));

var $menu_link = $('#menu li a'),
$hovered = $('#menu a.hovered'),/**/
$hovered_pos = $hovered.position('#menu');/*position of hovered menu item*/

/* declare our many colors that can confuse a chameleon*/
var $colour_arr = ['#fbb92e','#f8d52f','#b4f62f','#54f7a8','#3ff7f3','#3a97fa','#6835f9','#d544f6','#f650ab'];

/*iterate through all menu links and apply colors to border top */
$menu_link.each(function(index){

$menu_link.eq(index).css('border-color',$colour_arr[index]);

});

/* all the magic happens here*/
function init () {

if($hovered_pos) {
$span.css('left',$hovered_pos);
var index = 0;
/* search for the selected menu item*/
for(i=0; i<$menu_link.length; i++) {
if($($menu_link[i]).hasClass('hovered')) {
index = i;
}
}
$span.css('background',$colour_arr[index]);

}
/*mouseenter funtion*/
$menu_link.each(
function( intIndex ){
$(this).on (
"mouseenter",
function(event){

var x = $(this).position('#menu');
x = x.left;

$span.css('background',$colour_arr[intIndex]);

$span.stop();
$span.animate({

left: x
},300);
}
);

}
);
/* mouseout function*/
$menu_link.each(
function( intIndex ){
$(this).on (
"mouseleave",
function(event){
$span.stop();
var x = -100;
if($hovered_pos) {
x = $hovered_pos;
var index = 0;
for(i=0; i<$menu_link.length; i++) {
if($($menu_link[i]).hasClass('hovered')) {
index = i;
}
}
$span.css('background',colour_arr[index]);

}

$span.animate({

left: x
},300);
}
);
}
);
}
/* call/ init our function*/
init();
});