/*  This sets the width and color of the main part of the menu	*/

#menu {
width: 18em;
color:#eee;
}

/* Remove bullets etc from the ul's and put everything to the default left margin*/
#menu ul {
list-style: none;
margin: 0;
padding: 0;
}

/*  make the <h2> headings and the <a> anchors appear in the same size text and with borders but with slightly differing colors to differentiate between the two. This is also where we'll add any color, background changes to the anchor text on hover */

#menu a, #menu h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: none;
background: #FFF;
margin: 0;
padding: 2px 3px;
}

#menu h2 {color: #fff; background: #006633; text-transform: uppercase; border: thin solid white}

#menu a {
color: #000;

text-decoration: none;
}

#menu a:hover {
color: #a00;
background: #fff;
}

/*move the third level nested level lists out to where they should be, to their "pop out" position */
#menu ul ul ul {
position: absolute;
top: 0;
left: 0;
}

/*  Now set the li in relative positions to their parent*/
#menu li {position: relative;}

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

/* Hide all the popouts */
div#menu ul ul ul 
{display: none;} 

/*we want to declare that when a second level <li> element is hovered over we want it's child <ul> to appear */ 
div#menu ul ul li:hover ul 
{display: block;} 

/* add a second <ul> to the end of it making, div#menu ul ul li:hover ul ul and add that to the display: none; rule , Thus the 3rd level is hidden*/
div#menu ul ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

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

/* To counteract the hide we need to also provide the display on hover as well as we did with the 2nd level display */ 
div#menu ul ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

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