$(document).ready(function() {
	//.menu li catches all "li" elements under the .menu class
	$('.menu li').hover(function() {
		//if the ."item-links" div,located under the current li that we are talking about(talking about = ($(this).find('.item-links')))
		// is being animated,then stop it,change its css style(we're talking about the inner div that's in the li),
		//fade it in,and animate it's opacity.
		//for any q's, you can call me, i'll be glad to help.
	    if ($(this).find('.item-links').is(":animated")) {
	      $(this).find('.item-links').stop()
	        .css("height", "auto")
	        .css("margin-top", "5") 
	        .fadeIn('normal')
	        .animate({opacity: 1.0});
	    } else {
	      $(this).find('.item-links').stop()
	        .css("display", "none")
	        .fadeIn('normal')
	        .animate({opacity: 1.0});
	    }
	  }, function() {
	    if ($(this).find('.item-links').is(":animated")) {
	      $(this).find('.item-links').stop()
	        .css("height", "auto")
	        .slideUp('fast');
	    } else {
	      $(this).find('.item-links').stop().slideUp('fast');
	    }
	});
});