.box_nav {
position: relative;
text-align: left;
float: left;
}

/* remove all the bullets, borders and padding from the default list styling */
.box_nav ul {
color: #FFFFFF;
padding: 0;
margin: 0;
list-style-type: none;
}

.box_nav ul ul {
visibility:hidden;
position:absolute;
left: 0; 
width: 230px;
margin: 0px 0px 0px -10px;
border-top: 2px solid #FFFFFF;
}

* html .box_nav ul ul {
top: 20px;
t\op: 21px;
margin-left: -20px;
border-top: 2px solid #FFFFFF;
}

/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.box_nav li {
float: left;
font-size: 90%;
color: #FFFFFF;
font-weight: bold;
text-decoration: none;
position: relative;
padding: 0px;
margin: 0px 10px 0px 10px;
}

/* style the links for the top level */
.box_nav a, .box_nav a:visited {
display: block;
text-decoration: none; 
color: #FFFFFF; 
height: 21px;
line-height: 21px;
}
/* a hack so that IE5.5 faulty box model is corrected */
* html .box_nav a, * html .box_nav a:visited {
}
/* style the third level background */
.box_nav ul ul ul a, .box_nav ul ul ul a:visited {
color: #FFFFFF;
background-color: #F5A641;
width: 220px;
}

/* style the third level hover */
.box_nav ul ul ul a:hover {
color: #FFFFFF;
background: #F5A641;
width: 220px;
}

/* position the third level flyout menu */
.box_nav ul ul ul{
width: 220px;
left: 230px; 
top: -1px; 
border-top: 1px solid #FFFFFF;
}

/* style the table so that it takes no ppart in the layout - required for IE to work */
.box_nav table {
position: absolute; 
top: 0; 
left: 0;
}

/* style the second level links */
.box_nav ul ul a, .box_nav ul ul a:visited {
background: #F08900; 
color: #FFFFFF;
font-size: 100%;
font-weight: normal;
height: 22px;
padding: 0px;
width: 220px;
border-bottom: 1px solid #FFFFFF;
padding: 0px 0px 0px 10px;
margin: 0px;
}

.box_nav ul ul a:hover{
color: #FFFFFF; 
background-color: #F5A641;
width: 220px;
}

/* yet another hack for IE5.5 */
* html .box_nav ul ul a {
width: 220px;
w\idth: 220px;
border: 0;
border-bottom: 1px solid #FFFFFF;
}


/* style the top level hover */
.box_nav a:hover{
color: #FFFFFF;
background-position: bottom;
z-index: 100;
} 

.box_nav :hover > a{
z-index: 100;
}

.box_nav ul ul :hover > a {
color: #FFFFFF;
background-color: #F5A641;
}

/* make the second level visible when hover on first level list OR link */
.box_nav ul li:hover ul,
.box_nav ul a:hover ul{
visibility:visible; 
}
/* keep the third level hidden when you hover on first level list OR link */
.box_nav ul :hover ul ul{
visibility:hidden;
}

/* make the third level visible when you hover over second level list OR link */
.box_nav ul :hover ul :hover ul{ 
visibility:visible;
}

