#lava {
	/* you must set it to relative, so that you can use absolute position for children elements */
	position:relative;text-align:left; width:450px; height:30px;margin-top:110px;font-family:Gill Sans;}

#lava a {text-decoration:none;font-size:14px;color:#ABABAB;text-transform:uppercase;}

#lava 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*/
	left:-50px;top:0; 
	/* should be higher than #box */
	z-index:100;
}

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

#lava #box {	
	/* position absolute so that z-index can be defined and able to move this item using javascript */
	position:absolute; left:0; top:0; 
	/* should be lower than the list menu */
	z-index:50; 
	/* image of the right rounded corner */
	background:url(/images/frontend/mainmenu_hover.png) top left no-repeat;
	height:20px;	
	/* add padding 8px so that the tail would appear */
	padding-right:8px;	
	/* self-adjust negative margin to make sure the box display in the center of the item */
	margin-top:-10px;
}

#lava #box .head {
	/* image of the left rounded corner */
	background:inherit;
	height:20px;
	/* self-adjust left padding to make sure the box display in the center of the item */
	padding-top:10px;
}