/*  this time the #menu div is still our "container" only this time we want it to be 100% wide, so we could leave it as it is 
because it would default to this. However to properly contain the floated child lists if we also float the #menu div is will 
stretch to contain its floated children.
We then need to set the required dropdown width but this time it goes directly onto the <ul> elements themselves, and the need 
to be floated in order to appear side by side. We also still need to remove all the default padding, margins and bullets from
the <ul>s the same as before. */
#menu {
	width: 100%;
	float: left;
		
}
#menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 9em;
	float: left;
	
}
/*  Then we apply the required formatting to the <h2> headings and the <a> anchors, again I'm using the same formatting as the vertical menu */
#menu a, #menu h2 {
	font: bold 11px/16px Geneva, Arial, Helvetica, sans-serif;
	display: block;
	margin: 0;
	padding: 2px 3px;
	text-align: center;

}

#menu h2 {
	color: #fff;
	text-transform: lowercase;
}

#menu a {
	color: #FFFFFF;
	background: #9591B6;
	text-decoration: none;
	border: 1px solid #FFFFFF;
	text-align: left;
}

#menu a:hover {
	color: #413c6c;
	background: #D6D4E7;
	border: 1px solid #FFFFFF;
}

#menu li {
	position: relative;


}

#menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
width: 13em;
}

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

/* This time we actually do want to hide the second level menu (top choice) as we only want the <h2> heading to remain
 visible offering the top level choices as a dropdown, and then any further choices as popouts, so we need to target all
  <ul>'s that have at least ONE parent <ul> which will leaving out the heading list because it doesn't have a parent.
div#menu ul ul {
display: none;
} */

/* Again the convoluted CSS to keep IE happy, this time when we hover over the first <li> which is in fact the heading 
	too we want the child lists to appear
div#menu ul li:hover ul
{display: block;} */

/* This will bring back all child <ul> elements as soon as that first <li> is hovered on. So we need to add the counteracting 
	CSS for each level we wish to target. 
	In this demo we require 3 levels of hover to activate child menus so we have three levels to counteract also. */
div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}