$(function(){

    $("ul.dropdown li").hover(function(){
    
        $(this).addClass("hover");
        $('ul:first',this).css('visibility', 'visible');
    
    }, function(){
    
        $(this).removeClass("hover");
        $('ul:first',this).css('visibility', 'hidden');
    
    });
    
    $("ul.dropdown li ul li:has(ul)").find("a:first").append(" » ");
	
	var sub_menus = $(".sub_menu");
	$.each(sub_menus, function() {
		
		// in ie you must call the width method of ul so the li.width will return correct value
		var sub_menu_width = $(this).width();
		var menus = $(this).children('li');
		var menu_length = menus.length;
		var array_menu = new Array(menu_length);
		var max_width = 120;
		
		
		$.each(menus, function() {
			//$(this).css('width',menu_width+'px');
			array_menu.push( $(this).width() );
			
		})
		
		//alert($.browser.msie);
		
		// sort the array_menu in descending order
		function compareNumbers ( a, b )
		{
		  if ( a > b )
			return -1;
		  if ( a < b )
			return 1;
		  return 0; // a == b
		}

		array_menu.sort( compareNumbers );
		
		// get the highest number
		
		//if ($.browser.msie) 
//			max_width = sub_menu_width + 'px';
//		else

			max_width = array_menu[0] + 4;
		
		// change the menu width with the longest width of li element inside ul.sub_menu;
		$(this).children("li").width(max_width);
		
		
	})
	
	
	
		
	var cssObj = {
        backgroundColor: "#000099"
      }
	
	var cssObj2 = {
        backgroundColor: "#fff"
      }
	
		
	$("ul.sub_menu li").hover( function() {

		$(this).css(cssObj).children("a").css({color:"rgb(255,255,255)"});
		
	}, function() {
		$(this).css(cssObj2).children("a").css({color: "rgb(2,80,108)"});
	})

});