/*
This sets the width onto the individual lists, <ul>'s, this time as the need to float side by side to make them fit into whatever horizontal space is available to them. This horizontal width is determined by setting the width of the #menu2 div itself. The #menu2 div is also floated in order to "contain" it's floated descendants.
*/

#menu2 {
	font-family: "Trebuchet MS", Tahoma, Verdana, Arial;
	font-size: .9em;
	height: 30px;
}

#menu2 ul {
list-style: none;
margin: 0;
padding: 0;
width: auto;
float: left;
}

/* end */

/* Then we apply the required formatting to the top level headings and the <a> anchors. */

#menu2 a {
	display: block;
	color: #333333;
	margin: 0 10px 0 0;
	padding: 5px 10px;
	text-decoration: none;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #99CC99;
	line-height: 16px;
}

#menu2 h2 {
	color: #666666;
	background-color: #99CC99;
}

#menu2 a:hover {
	color:#FFFFFF;
	background-color:#99CC99;
}

#menu2 a:active, #menu2 a:focus {
	color: #990000!important;
	font-weight: bold!important;
}

/* end */

/* Positioning the Popout Menus and Dropdown Menus */

#menu2 li {
	padding: 6px;
	float: left;
		background-color:#FFFFFF;
}

#menu2 ul ul {
	position: absolute;
	z-index: 500;
}

#menu2 ul ul li {
	width: 200px;
	float: left;
	clear: both;
	border: 1px solid #666666;
	margin-bottom: 5px;
	background-color:#99CC99;
}

#menu2 ul ul ul {
	top: 70%;
	left: 70%;

}

/* end */

/* This time we actually do want to hide the second level menu (top choice) as we only want the top, inside the top level <ul> to remain visible. 

The display: block; rules show the three levels being activated with the display: none; rules being entered afterwards to more specifically hide the unwanted (deeper nested) lists (counteract them). */

#menu2 ul ul,
#menu2 ul li:hover ul ul,
#menu2 ul ul li:hover ul ul
{display: none;}

#menu2 ul li:hover ul,
#menu2 ul ul li:hover ul,
#menu2 ul ul ul li:hover ul
{display: block;}

/* end */