/* CSS Document */


/*I have applied, in em's, the width of the menu to the "container" div ~ <div id="menu">, that way we can forget about IE's Box Model problems as all block elements inside this will naturally fill the container's width by default, even if borders are used on internal elements.

em widths are used to enable the menu to resize to contain text if/when text is enlarged. And for the purposes of this demo I have added a background color to this div for visual reasons only.
*/

#menu {
	width: 12em;
	background: White;
}

/*Now that the list, <ul>, elements are all contained. The first thing we do is remove the Bullets and Indents which browsers naturally apply to <ul> elements by default. Both padding and margin require to be set to zero as different browsers create the indent using either of these properties.*/

#menu ul {
list-style: none;
margin: 0;
padding: 0;
}

/*Then we would like to 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: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
}

#menu h2 {
	color: Maroon;
	background: #FEE741;
	text-transform: uppercase;
}

#menu a {
	color: #000;
	background: White;
	text-decoration: none;
}

#menu a:hover {
	color: #a00;
	background: #ACADFF;
	border-width: 1px;
	border-style: solid;
	border-color: #ccc #888 #555 #bbb;
}

/*Now we want to move the third level nested level lists out to where they should be, to their "pop out" position.

The way we do this is to use Absolute Positioning which takes them out of the flow of the page and allows us to position them where we want.*/

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

/*In this demo code we don't want to move the first level list (which contains the [h2] element) nor the second level lists (top level choice) to a pop out position, so we need to use CSS specificity to select only <ul> elements that already have at least TWO parent <ul> elements. For more info, visit this tutorial's website at www.tanfa.co.uk/css/examples/menu/tutorial-v.asp#menreq 

This CSS below has now corrected the width and positioning, trust me it has, but now the "popouts" are appearing on top of the first level lists because both their coordinates were set at zero we need to adjust the left co-ordinate to move the popouts over to the right side of their containing block. Lets set them to 100% left to avoid having to do any sums with widths again.*/

#menu li {position: relative;}

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

/*So let's hide all the popouts*/

div#menu ul ul ul 
{display: none;}

/*Easy eh.. Now to get them re-appear 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;}

/*So that's cool, except that you probably don't want all of the child <ul>'s appearing until you hover over their immediate parent <li>. This is where we could do it easier with child selectors, but we can get around this using a bit of long-winded CSS.

So we leave what we have but now tell it that we want to hide any <ul>'s that are two or more descendant children of the hovered <li> - Yikes!

So we take the rule that we just used to display the lists div#menu ul ul li:hover ul and 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.*/

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

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

/*This works, we get one level visible now on the hover, but when we move over to the popout and hover on it the deeper levels are remaining hidden. This is because the number of element selectors we now have in the rule we just added to the display: none; rule is overriding the selector in the display: block; rule as per CSS Specificity Rules.

To Counteract this we need to add much more specific rule to the display: block; rule too.*/

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

/*You would then need to keep adding similar counteracting selectors to each of these two rules, as necessary, depending on how many levels deep your menu pops out. But that is all the levels we need for this demonstration code.*/

/*MY NOTE: the fix for IE is in the SSI menu html page*/