.menu {
    position:   relative;
    width:         588px;
    height:         29px;
    text-align:     left;}

/*  hack to correct IE5.5 faulty box model */
* html .menu {width: 589px; w\idth: 588px;}

/* remove all the bullets, borders and padding from the default list styling */
.menu ul     {padding:0; margin:0; list-style-type:none;}
.menu ul ul  {width:135px; text-align: left;}

/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu ul li {
    float:            left;
    padding-left:      0px;
    position:     relative;}

/* style the links for the top level */
.menu a, .menu a:visited {
    display:           block;
    font-size:          11px;
    text-decoration:    none; 
    color:           #5C5C5C; 
    margin-left:        33px;     /*  Spacing between menu items   */
    padding-left:       10px;     /*  lead space before menu text  */
    height:             29px; 
    line-height:        29px;
}

/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited   {width: 98px; w\idth: 98px;}

/* style the second level background */
.menu ul ul a.drop, 
.menu ul ul a.drop:visited   {background: #F9F9F9 url('../images/grey-arrow.gif') no-repeat 120px center;}
/* style the second level hover */
.menu ul ul a.drop:hover     {background: #F9F9F9 url('../images/blue-arrow.gif') no-repeat 120px center; }
.menu ul ul :hover > a.drop  {background: #F9F9F9 url('../images/blue-arrow.gif') no-repeat 120px center; }

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

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
    visibility:   hidden;
    position:   absolute;
    height:            0;
    top:            29px;
    left:              0; 
    width:         135px;
    z-index:         502;
}

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

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

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

/* full width li for third level */
.menu ul ul ul li   {width: 200px;}

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

/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
    background:   #F9F9F9; 
    color:        #5C5C5C; 
    height:          auto; 
    line-height:      1em; 
    padding:      5px 0px; 
    padding-left:    10px;
    width:          135px;
}

/* yet another hack for IE5.5 */
* html .menu ul ul a                     {width:136px; w\idth:135px;}

/* style the third level links */
.menu ul ul ul a  {
    background:   #E9E9E9; 
    color:        #5C5C5C; 	
}
.menu ul ul ul a, .menu ul ul ul a:visited {
    height:          auto; 
    line-height:      1em; 
    padding:      5px 0px; 
    padding-left:    10px;
    width:          200px;
}

/* yet another hack for IE5.5 */
* html .menu ul ul ul a                  {width:201px; w\idth:200px;}

/* style the top level hover - change both the folow definitions to alter top level colours  */
.menu a:hover, .menu ul ul a:hover       {color:#BABABA;}
.menu :hover > a, .menu ul ul :hover > a {color:#BABABA;}

/* 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;}

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