#menu {
	/* you must set it to relative, so that you can use absolute position for children elements */
	position:relative; 
	margin-left: 25px;
    position: relative;
    top: 14px;

}

#menu ul {
	/* remove the list style and spaces*/
	margin:0; 
	padding:0; 
	list-style:none; 
	display:inline;
	
			
	/* position absolute so that z-index can be defined */
	position:absolute; 
	
	/* center the menu, depend on the width of you menu*/
 
	
}

#menu ul li {
	
	/* give some spaces between the list items */
	margin:0 5px; 
	
	/* display the list item in single row */
	float:left;
}

#menu #box {
	
	/* position absolute so that z-index can be defined and able to move this item using javascript */
	position:absolute; 
	left:0; 
	top:60px; 
	z-index:200; 

	/* image of the right rounded corner */
	background:url(../img/tail.gif) no-repeat right 9px; 
	height:36px;


	/* add padding 8px so that the tail would appear */
	padding-right:8px;
	
	/* set the box position manually */
	margin-left:115px;
	
}

#menu #box .head {
	/* image of the left rounded corner */
	background:url(../img/head.gif) no-repeat 0 -3px;
	height:35px;
	color:#eee;
	
	/* force text display in one line */
	white-space:nowrap;

	/* set the text position manually */
	padding-left:8px;
	padding-top:12px;
}