/* CSS to create horizontal multi level drop down menus */

/* set the #navigation div width to 100% and float left */
#navigation {
  width: 100%;
  float: left;
}

/* remove bullets and padding, set the width of the <ul>s, float to the left */
#navigation ul {
  list-style: none; /* removes the bullets */
  margin: 0;
  padding: 0;
  /*width: 12em;*/
  float: left; /* makes the <ul>s horizontal instead of vertical */
}

/*
Then we apply the required formatting to the <a> anchors.
*/

#navigation a {
  font: Verdana, Helvetica, Arial, sans-serif;
  display: block;
 /* border-width: 1px;
  border-style: solid;*/
 /* border-color: #ccc #888 #555 #bbb;*/
  margin: 0;
  /*padding: 2px 3px;*/
  padding: 0.3em 0.6em;
}

#navigation a {
  color: white;
  background: #036;
  text-decoration: none;
}

#navigation a:hover {
  /*color: white;*/
  background: #369;
}

/* formats the main menu only */
#navigation > ul > li > a {
 /* text-align: center;*/
  border-bottom: 2px solid #7da5d8;
  border-right: 1px solid #7da5d8;
  border-left: 1px solid #7da5d8;
}

/* set the width of the first level drop downs */
#navigation ul ul {
  width: 16em;
  border: 2px solid #7da5d8;
}

/* set the width of the second level drop downs */
#navigation ul ul ul {
  width: 22em;
  /*border: 2px solid #7da5d8;*/
}


/* Positioning the Pop-out Drops
The First level Drop Down Menus are already in the correct place, so 
we don't need to position them, but we need to position the children, 
nested lists, of these choices absolutely again. so we need to make the 
parent <li> elements into containing blocks for these absolutely positioned 
children, which is done by placing position: relative; onto the parent <li>'s 
and again because we are not using offset co-ordinates to actually move these 
<li> elements we can apply it globally.

Then we need to select all <ul> elements that have at least TWO parent <ul>'s
 again in order to move them over into their pop out position. This time
 we do not need to set the width here as we already set the width on all
 <ul> elements to 12em so this will take that width too by order of the cascade.
*/

#navigation li {
  position: relative;
}

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

/*
Because we have left the first child list "in the flow" of the 
document rather than position it for pop-out purposes it is actually 
pushing any following text down below it. Normally in these drop down 
scenarios we would want it to drop down over the top of any existing text.
We can do this by pulling it out of the flow using absolute 
positioning again, only this time we don't want to give it any offset 
co-ordinates, because we're actually happy with where it is, and just in
 case we'll give it a high z-index to ensure it and it's children 
actually do appear over the top of any positioned text that may follow.
*/

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

/* Hiding and Revealing using :hover */

/*
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 leave out the heading list because it doesn't have a parent.
*/

div#navigation 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 this will bring back all child <ul> elements as soon
 as that first <li> is hovered on.
*/

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

/*
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.
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#navigation ul ul,
div#navigation ul li:hover ul ul,
div#navigation ul ul li:hover ul ul {
  display: none;
}

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

/* The rest of the css is to fix problems with IE */

body {
  behavior: url(csshover.htc);
}

/* this is to fix the following IE issues:
1.  whitespace between the list items
2.  the anchor hover background change only works of the link text itself is hovered over, 
    it should happen on the whole block
3.  You cannot increase or decrease the size of the text
4.  The first hover is moving the list down even though we absolutely positioned it to take 
    it out of the flow
*/

<!--[if IE]>
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc);
font-size: 100%;
}

#navigation ul li {float: left; width: 100%;}
#navigation ul li a {height: 1%;} 

#navigation a, #navigation h2 {
/*font: bold 0.7em/1.4em arial, helvetica, sans-serif;*/
}
</style>
<![endif]-->