.heading { background: #0F7B61; width: 112px; border:1px solid #0F7B61; padding:5px 8px; font-family:Georgia, sans-serif; font-size:small; font-weight:bold; text-transform:uppercase; color:#fff; text-align:center; margin-bottom:-3px; }

/* put a slight margin between navlist and element above */
div#dropnavlist { margin-top: 5px; font-family: verdana; font-size:small; }

/* remove the indents and bullets from the unordered list and define the width of menu items */
div#dropnavlist ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 130px; /* Width of Menu Items */
	border-bottom: 2px solid #0F7B61;
	}

/* need to position list items. These will stack vertically by default, which is what is require. However, we must set the position as relative, because we will need to position the sub-menus absolutely within them. */	
div#dropnavlist ul li {
	position: relative;
	}
	
/* each sub-menu appears to the right of its parent menu item when that item is hovered over */	
div#dropnavlist li ul {
	position: absolute;
	left: 129px; /* Set 1px less than menu width */
	top: 0;
	color: #0F7B61; 
	background: #f9f9f9;
	display: none;
	}

/* Styles links for Menu Items */
div#dropnavlist ul li a {
	display: block;
	text-decoration: none;
	color: #0F7B61;
	font-weight: bold;
	background: #fff; /* IE6 Bug */
	padding: 5px;
	border: 2px solid #0F7B61;
	border-bottom: 0;
	}

/* Fix IE. Hide from IE Mac \*/
* html div#dropnavlist  ul li { float: left; height: 1%; }
* html div#dropnavlist  ul li a { height: 1%; }
/* End */

/* need list - dropnav - id on this style to get the hover background color */
ul#dropnav li a:hover { background: #0F7B61; color: #fff; } /* Hover Styles */
		
div#dropnavlist li ul li a div#dropnavlist { padding: 2px 5px; } /* Sub Menu Styles */

/* make those sub-menus appear when we hover over the menu items and need to add the JS to make this work thus the li.over ul */			
div#dropnavlist li:hover ul, div#dropnavlist li.over ul { display: block; } /* The magic */