body {  
	behavior: url(includes/csshover.htc);
} /* WinIE behavior call */


/* CSS Document          */
/* Vertical Pop Out Menu */
/* Vertical Pop Out Menu */
/* Vertical Pop Out Menu */

#mymenu {

width: 276px; /* set width of menu */
background: #eee;
} 

#mymenu ul { /* remove bullets and list indents */
list-style: none;
margin: 0;
padding: 0;
}

/* style, color and size links and headings to suit */
#mymenu a, #mymenu h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
}

#mymenu h2 {
color: #fff;
background: #000;
text-transform: uppercase;
}

#mymenu a {
color: #000;
background: #efefef;
text-decoration: none;
}

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

/*NOTES:
The CSS above removes the padding/margin and bullets from all the lists, sets the width of the the entire 
menu and styles the links and heading to suit.

View the results so far, if you like, remembering to view with a non-IE browser please. Use your 
back button to come back here.
*/

/*POSITIONING THE POP UPS */
#mymenu li {
/* make the list elements a containing block for the nested lists */
position: relative;
} 

#mymenu ul ul ul {
position: absolute;
top: 0;
left: 100%; /* to position them to the right of their containing block */
width: 100%; /* width is based on the containing block */
}

/*NOTES:
The position: relative; applied to the #menu li makes the <li> elements into containing blocks for the 
nested <ul> elements.

We only want to apply positioning to tird level nested lists and deeper so the #menu ul ul ul targets 
that and the popout is positioned over to the right edge of their containing block (parent <li> element)

This now shows all the popouts in their correct position, remember to view with a non-IE browser.
*/

/* Hiding and Revealing using :hover */
div#mymenu ul ul ul,
div#mymenu ul ul li:hover ul ul
{display: none;}

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

/*NOTES:
This bit could be simplified with the use of child selectors, unfortunately we have to use more 
specific descendant selectors in order for IE to understand.

This now achieves what we want, in a non-IE browser.
*/