#Menu { 
font-family: Arial, sans-serif; 
background:#dca;border:1px solid #000;  /*border-bottom: 10px solid #A0CEF8; gives light blue bottom border */
position:					relative;
	z-index:					3; 					/* Content overlaps right menu */
	top:							5px;
	width:						auto;
	min-width:				120px;
	
	margin-top:				5px;
	margin-bottom:		5px;
	margin-right:			170px;
	margin-left:			120px;

	padding:					4px;

	font-size:				14px;
	font-weight:			normal;
	text-align:				center;
} 
#Menu ul { 
text-align: center; /* We are using text-align: center on ul to horizontally align our menu to the page. If you want the menu aligned left or right just change text-align to either left or right */ 
margin: 0 0 0px 0; /* Just some margin to align the blue border below the menu   Margin order margin-top margin-right margin-bottom margin-left  */ 
} 
#Menu li { border:1px solid #000;
display: inline; /* Menu links are horizontally aligned using display: inline                inline Default. The element will be displayed as an inline element, with no line break before or after the element   */ 
} 
#Menu li a { 
 /* Display: block won't work in this example, instead we are using padding to make the hole tab a clickable link */ 
color: #5d5350; 
text-decoration: none; 
font-weight: bold; 
background:  no-repeat left top; /* Rollover effect using "Fast rollovers without preload" concept for the left part of the tab */ 
} 
#Menu li a:hover {color:#fff; background:#764;}
#Menu li a:active {color:#fff; background:#c00;}


#Menu li a span { 
 
background:  no-repeat right top; /* Rollover effect using "Fast rollovers without preload" concept for the right part of the tab */ 
} 
#Menu li a:hover span { 
background:  no-repeat right bottom;