.sidemenu {
    position:   relative;
    width:      200px;
    height:     450px;
    margin:     20px 10px 0 10px;
    text-align: left;}

/*  hack to correct IE5.5 faulty box model */
* html .sidemenu {width: 201px; w\idth: 200px;}

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

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

/* style the links for the top level */
.sidemenu a, .sidemenu a:visited {
    display:           block;
    text-decoration:    none; 
    color:           #5C5C5C; 
    height:             29px; 
    line-height:        29px;
}

/*  set font sizes  */
.sidemenu a, .sidemenu a:visited                   {font-size: 14px; color: #548CC0;}
.sidemenu ul ul a, .sidemenu ul ul a:visited       {font-size: 11px;}
.sidemenu ul ul ul a, .sidemenu ul ul ul a:visited {font-size: 10px;}

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

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

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

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

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

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

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

/* full width li for third level */
.sidemenu ul ul ul li   {width: 250px;}

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

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

/* yet another hack for IE5.5 */
* html .sidemenu ul ul a                     {width:161px; w\idth:160px;}

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

/* yet another hack for IE5.5 */
* html .sidemenu ul ul ul a                  {width:251px; w\idth:250px;}

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

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

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