#menu{
    display:table;
    position:relative;
    width:960px;
    height:34px;
    font:normal 18px/34px "Times New Roman", Times, serif;
    color:#fff;
    border:0;
    z-index:100;
}
/* hack to correct IE5.5 faulty box model */
* html #menu{}

/***********/
/* LEVEL 1 */
/***********/

/* remove all the bullets, borders and padding from the default list styling */
#menu ul {
    padding:0;
    margin:0;
    list-style-type:none;
}

/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
#menu li {
    position:relative;
    float:left;
}

/* style the links for the top level */
#menu a, #menu a:visited {
    font:bold 14px/34px Verdana,Tahoma;
    color:#fff;
    text-decoration:none;
    padding:9px 14px 8px;
}

/* a hack so that IE5.5 faulty box model is corrected */
* html #menu a, * html #menu a:visited {}


/* style the top level hover */
#menu a:hover{
    color:#fff;
    background:#102a89;
}
#menu :hover > a{
    color:#fff;
    background:#102a89;
}

/* style the table so that it takes no ppart in the layout - required for IE to work */
#menu table {
    position:absolute;
    top:0;
    left:0;
    border-collapse:collapse;
}

/***********/
/* LEVEL 2 */
/***********/

#menu ul ul {
    padding:0;
    margin:0;
    width:270px;
}

/* subnavs need a set width */
#menu ul ul a, #menu ul ul a:visited {
    display:block;
    background:#102a89;
}

/* style the second level background */
#menu ul ul a.drop, #menu ul ul a.drop:visited {
    background:#102a89;
}

/* style the second level hover */
#menu ul ul a.drop:hover{
    background:#102a89;
}
#menu ul ul :hover > a.drop {
    background:#102a89;
}

/* hide the sub levels and give them a positon absolute so that they take up no room */
#menu ul ul {
    visibility:hidden;
    position:absolute;
    top:34px;
    left:0;
    width:270px;
    border:0;
    background:#102a89;
    margin:0;
    padding:10px;
}

/* another hack for IE5.5 */
* html #menu ul ul {
    top:34px;t\op:34px;
}

/* style the second level links */
#menu ul ul a, #menu ul ul a:visited {
    color:#FFF;
    font-weight:normal;
    font-size:12px;
    height:auto;
    line-height:18px;
    padding:5px 10px;
    width:250px;
}
/* yet another hack for IE5.5 */
* html #menu ul ul a, * html #menu ul ul a:visited {
    width:270px;
    w\idth:250px;
}


/* style the second level hover */
#menu ul ul a:hover{
    color:#FFF;
    padding:5px 10px;
    width:250px;
    text-decoration:underline;
}
#menu ul ul :hover > a{
    color:#FFF;
    padding:5px 10px;
    width:250px;
    text-decoration:underline;
}

/* make the second level visible when hover on first level list OR link */
#menu ul li:hover ul,
#menu ul a:hover ul{
    visibility:visible;
}

/***********/
/* LEVEL 3 */
/***********/

/* position the third level flyout menu */
#menu ul ul ul{
    left:200px;
    top:-1px;
    width:200px;
}

/* position the third level flyout menu for a left flyout */
#menu ul ul ul.left {
    left:-200px;
}

/* style the third level background */
#menu ul ul ul a, #menu ul ul ul a:visited {
    background:#ff7171;
}

/* style the third level hover */
#menu ul ul ul a:hover {
    background:#ff7171;
}

/* keep the third level hidden when you hover on first level list OR link */
#menu ul :hover ul ul{
    visibility:hidden;
}

/* make the third level visible when you hover over second level list OR link */
#menu ul :hover ul :hover ul{
    visibility:visible;
}