#lava a { color: #000; text-decoration: none; text-transform: uppercase;}
#lava a:hover { color: #D4D4D4;}
/* you must set it to relative, so that you can use absolute position for children elements */
#lava { position: relative; margin: 0 auto; padding-top: 12px; width: 770px; height: 28px;}

#lava ul { display: inline; position: absolute; margin-left: 15px; list-style: none; z-index: 100;}

#lava ul li { float: left; padding-right: 40px; font: 14px "Gill Sans", Tahoma, Geneva, sans-serif; letter-spacing: 0.01em;}

#lava #box { position: absolute; top: 10px;
/* should be lower than the list menu */
			z-index: 50;
/* image of the right rounded corner */
			background: url(tail.gif) no-repeat right center; 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-left: -10px;}

#lava #box .head {
/* image of the left rounded corner */
			background: url(head.gif) no-repeat 0 0; height: 20px;
/* self-adjust left padding to make sure the box display in the center of the item */
			padding-left: 10px;}