#menu {
line-height:2.2em;
width: 650px;
height:10px;
background-color: #eaf4f6;
float: left;
text-align: left;
margin-top: 3px;
margin-left: 1px;
margin-right: 0px;
margin-bottom: 1px;
padding: 0px;}

#menu ul {
list-style: none;
width: 10em;
float: left;
}

/*The above sets the width onto the individual lists, <ul>'s, this time as the need to float side by side to make them fit into whatever horizontal space is available to them. This horizontal width is determined by setting the width of the #menu div itself. The #menu div is also floated in order to "contain" it's floated descendants
*/

/*Then we apply the required formatting to the <h2> headings and the <a> anchors - Color to taste.*/

#menu a, #menu h2 {
font: normal 11px/16px Verdana, Helvetica, Arial, sans-serif;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
text-align: center;
}

#menu h2 {
color: #fff;
background: #003399;
;
}


#menu a {
color: #fff;
background: #003399;
text-decoration: none;
opacity:0.90;
filter: alpha(opacity=90);
font-weight: bold;
}

#menu h2 a {
color: #fff;
background: #003399;
text-decoration: none;
border: none;
font-weight: bold;
}


#menu a:hover {
color: #fff;
background: #ffcc01;
font-weight: bold;
opacity:0.90;
filter: alpha(opacity=90);
}



/*Positioning the Popout Menus and Dropdown Menus*/
#menu li {position: relative;}


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

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

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

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