$(function(){
	var myLi = $('.menuHoriz li:gt(0)'); //top line items selected except the first
	var myUl = $('#navigation ul:gt(0)'); //sub menus selected by ul except the first ul 
	
	//show the submenu
	$(myLi).each(function(index) {
    	$(this).mouseenter(function(){
    		//left value for this top line item
    		var leftPosition = ($(this).position().left + 'px'); 
    		//make sub menu visible at correct left value JSON format for css
	    	$(myUl[index]).css({'visibility':'visible',	'left':leftPosition}); 
    	});
    	$(this).mouseleave(function(){
    		$(myUl[index]).css('visibility', 'hidden');
    	});
	});

	//keep the sub menu visible until mouse leaves or click
	$(myUl).each(function(index) {
    	$(this).mouseenter(function(){
    		$(myUl[index]).css('visibility', 'visible'); 
    	});
    	$(this).mouseleave(function(){
    		$(myUl[index]).css('visibility', 'hidden');
    	}); 
    	$(this).click(function(){
    		$(myUl[index]).css('visibility', 'hidden');
    	}); 
	});
});