/* Horizontal Menu*/
#menu {
width: 100%;
margin:0;
background:Orange;
float: left;
}
#menu ul {
list-style: none;
margin: 50;
padding-left:auto;
width: 13.2em;
float: left;
}
/*The above 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 #menu div itself. The #menu div is also floated in order to "contain" it's floated descendants.

Then we apply the required formatting to the <h2> headings and the <a> anchors,
*/

#menu a,#menu h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
display:block;
border-width: 0px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 4px;
}
#menu h2 {
color:Maroon;
background:Orange;
text-transform: uppercase;
margin:0;
}

#menu a {
color: #000;
background:Orange;
text-align:left;
text-decoration: none;
}

#menu a:hover {
/*color: #a00;*/
/*background: #fff;*/
background-color:Orange; /*#ff3300;*/
color:White;
font-weight:bold;
text-align:left;
text-transform:uppercase;
}
/*position the poo out menu 
The position: relative; on the <li> elements establish containing blocks for the descendant <ul> elements.
All secondary levels and deeper are given position: absolute; and a high z-index in order to make them appear, drop down above following content. the third level and deeper lists are the ones we want to move so "offset" positioning co-ordinates only required to be input onto them

*/
#menu li {position: relative;}

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

#menu ul ul ul {
top: 0;
left: 100%;
}
/*Hiding and revealing using hover
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).

*/
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;}