@charset "utf-8";
/* CSS Document - CSS Code
 
Without CSS, we have a plain multi-level unordered list. We'll need to apply some creative styles to transform this into a navigation menu. In the previous article in this series, we took a close look in detail on how to style the lists. Here is a summary of the CSS code that we will need.

 */

ul#navMenu {
padding:0px;
margin:0px;
width:1008px;
height:25px
list-style:none;
position:relative;
}

ul#navMenu ul {
position:absolute;
left:0;
top:100%;
display:none;
padding:0px;
margin:0px
}

ul#navMenu li {
display:inline;
float:left;
position:relative
}

ul#navMenu a {
font-size: 8pt;
text-decoration:none;
padding:5px 0px;
width:100px;
background:#6f6754;
color:#ffffff;
float:left;
text-align:center;
border:1px solid;
border-top-color:#6f6754;
border-bottom-color:#6f6754;
}

ul#navMenu a:hover {
background:#001342;
color:#ffb91D;
}

/* Here is the section of CSS code that makes the sub-items appear when you hover over the first level main items. */

ul#navMenu li:hover ul {
display:block;
}

/* Dropdown Menu  2nd Level*/

ul#navMenu ul a {
background:#FDD880;
color:#001342;
width:210px;
text-align:left;
padding-left:15px;
border:1px solid;
border-top-color:#ffffff;
border-bottom-color:#ffffff;
}

ul#navMenu ul li {
display:block;
margin:0px
}


/*  

You first hide the second-level sub-item list by setting the style display:none. Then to make the sub-items appear, you set the style to display:block on the pseudo class "hover" on the parent list item. Here is what the final product should look like 

Third level Menu Items
 
In this example, we are going to add a third level of menu items. The third level will be placed under the "Video" sub-item
<ul id="navMenu">
  <li><a href="#">Home</a></li>
  <li><a href="#">Products</a>
    <ul>
      <li><a href="#">Computers</a></li>
      <li><a href="#">Audio</a></li>
      <li><a href="#">Video »</a>
      <ul>
        <li><a href="#">VCR</a></li>
        <li><a href="#">DVD</a></li>
      </ul></li>
    </ul></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About</a>
    <ul>
      <li><a href="#">Location</a></li>
      <li><a href="#">Hours of Operation</a></li>
    </ul></li>
</ul>

For the third level, we need to add the following CSS styles.
*/
ul#navMenu ul ul {
top:0;left:100%;
width:150px;
}


/* EAW added this section to customize the third level */
ul#navMenu ul ul a {
top:0;left:100%;
width:140px;
background-color: #bfccdd;
color: #001342;
}
/* end */

ul#navMenu li:hover ul ul {
display:none;
}

ul#navMenu ul li:hover ul {
display:block;
}


/* Background color for the navbar DIV/container */

#nav {
	background-color:#6f6754;
	padding-bottom:25px
}