.lava {
	/* you must set it to relative, so that you can use absolute position for children elements */
	position:relative; 
	text-align:center; 
	width: 849px;
	height:43px;
}
.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:0; 
	top:0; 
	/* should be higher than #box */
	z-index:100;
}
.lava ul li {
	/* give some spaces between the list items */
	margin:0 15px; 
	padding:10px 0 0 0;
	/* display the list item in single row */
	float:left;
}
.lava ul li a{
	font: bold 14px arial;
	text-decoration: none;
	color: #333;
	outline: none;
	text-align: center;
	top: 7px;
	text-transform: uppercase;
	letter-spacing: 0;
	z-index: 10;
	cursor:pointer;
	display: inline-block;
	float: left;
	height: 45px;
	position: relative;
	overflow: hidden;
	margin: auto 10px; 
}
.lava #box1,
.lava #box2{
	/* 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/lava_right.png) no-repeat right center; 
	height:44px;
	/* 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-left:-10px;
}
.lava #box1 .head,
.lava #box2 .head{
	/* image of the left rounded corner */
	background:url(../images/lava_left.png) no-repeat 0 0; 
	height:44px;
	/* self-adjust left padding to make sure the box display in the center of the item */
	padding-left:10px;
}
/*=================== For Third Menu (Opposite) ===================*/
.lava #box3{
	/* 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/lava_right_opposite.png) no-repeat right center; 
	height:44px;
	/* 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-left:-10px;
}
.lava #box3 .head{
	/* image of the left rounded corner */
	background:url(../images/lava_left_opposite.png) no-repeat 0 0; 
	height:44px;
	/* self-adjust left padding to make sure the box display in the center of the item */
	padding-left:10px;
}