This is a nice and colorful jQuery and css menu
The Idea is to create a normal ul li menu and apply a top border to the anchor tags with colors that will match with the element background color when it is hovered.
The jQuery will create a span element and insert it into the HTML structure, this is the colourful background that will be moving across the menu.

HTML Structure

 <!-- start menu -->
<div id="menu">
<ul>
<li>
                <a href="">Web Design </a>
              </li>
<li>
                <a href="">jQuery</a>
              </li>
<li>
                <a href="">Html5 & Css3</a>
              </li>
<li>
                <a href="">PHP</a>
              </li>
<li>
                <a href="">Photoshop</a>
              </li>
<li>
                <a href="">Illustrator</a>
              </li>
<li>
                <a href="">WordPress</a>
              </li>
<li>
                <a href="">Tutorials</a>
              </li>
<li>
                <a href="">Tutorialpot</a>
              </li>
</ul></div>

      <!-- end menu -->

jQuery

This is where the colors are applied and the background is animatedacross the menu

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();
});

Css

A simple css for our awesome 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; }

That's it,hope you like it!

The article source:http://tutorialpot.com/2012/02/colorful-css-and-jquery-menu/