/*All of the lists need to be jigged around a bit  namely,
the padding and margin set to zero and the list-style set to none:

The root UL
*/
#nav {
    padding: 0;
    margin: 0;
    list-style: none;
}
/* And also any UL bellow the root. */         
 #nav ul{
    padding: 0;
    margin: 0;
    list-style: none;
}

/*
Makes submenus drift to the right.
*/
ul ul ul{
    position:absolute;
    top: 0;
    left: 100%;
    width: 8em;
}
            
/*
Transform the first-level list into a horizontal bar. 
The position has been set to relative because we want the position of the
second-level, nested lists to be relative to the first-level list items and
the width has been set to space it out a bit. 
*/
#nav li{
    padding-left: 4px;
    padding-right: 1px;
    padding-top: 1px;
    padding-bottom: 1px;
    list-style: none;
    float: left;
    position: relative;
    width: 4em;
    font-weight: bold;
    background: transparent;
    color: #00F;
    height: 20px;
    text-align: center;
}

            
/*All the others submenu are aligned to the top, as the default.*/
#nav li ul li {
    float: none;
    width:auto;
    border-top: 1px solid #8496AA;
    border-left: 1px solid #788BA0;
    border-right: 1px solid #788BA0;
    border-bottom: 1px solid #788BA0;	
    padding-left: 3px;
    padding-right: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    background: #8496AA;
    text-align: left;
    left:0;
}
            
/*
The second-level lists that will be the dropdowns:
*/
li ul {
    display: none;
    position: absolute;
    top: 1em;
    left: 0px;
}
            
/*
This positions the second-level lists absolutely (pulling them out of the
flow of HTML into a world all of their own) and sets their initial state to not be
displayed. If you substitute display: none with display: block, you will see the need
for the top and left properties in Internet Explorer, because without them, IE will
align the second-level lists to the top right of their relative parent rather than
the bottom left. Unfortunately, this IE fix will mess things up in browsers like Opera,
so add the following CSS to reset the top and left properties on all but IE browsers:
*/
li > ul {
    top: auto;
    left: auto;
}
            
/*
Because IE is blind we need to find another way to identify the properties of the :hover
pseudo class. With JavaScript, we know that we can manipulate the className property of
an element so what we are going to do first is alter the CSS:
li:hover ul{ display: block; }
becomes:
*/
#nav li:hover ul, li.over ul{
    display: block;
    width: 150px;
    top: 20px;
}

#nav li ul li:hover ul, ul ul li.over ul{
    display: block;
    top: 0px;
}
#nav li ul li ul li:hover ul, ul ul ul li.over ul{
    display: block;
     width: 350px;
}

/* Make sure the other menus are not visible */
#nav  li:hover ul ul, li.over ul ul{
    display: none;
}
#nav li:hover ul ul ul, li.over ul ul ul{
    display: none;
}
 #nav li:hover ul ul ul ul, li.over ul ul ul ul{
    display: none;
}
            
/*Hover over the menu bar.*/            
#nav li code a:hover{
        color: #FF6600;
}
            
/*Hover on the other LIs in the sub menus.*/            
#nav li ul li:hover,  #nav li ul li.over{
        font-weight: normal;
        border-style: outset;
        background: #FD7E00;                    
        border-top: 1px solid #FF6600;	
        border-bottom: 1px solid #FFBA8C;
        border-left: 1px solid #FFBA8C;
        border-right: 1px solid #FF6600;
        padding-left: 3px;
        padding-right: 0px;
        padding-top: 0px;
        padding-bottom: 0px;
}
            
/*  Labels "A" in the main menu */
#nav li  code  a {
	text-decoration: none;
	line-height: 20px;
	background: transparent;
	overflow: hidden;
	font-family: arial,trebuchet ms,tahoma;
	font-size: 12px; 
	font-style: normal;
	font-weight: bold;
	color: #333333;
}


#nav a {
	text-decoration: none;
	line-height: 22px;
	background: transparent;
	overflow: hidden;
	font-family: trebuchet ms,tahoma, arial;
	font-size: 12px; 
	font-style: normal;
	font-weight: normal;
	color: #FFFFFF;
}

#nav h2 {
    display: none;
}