.menu {
width:900px; 
height:25px; 
position:relative; 
z-index:100;
font-family:Arial, Helvetica, sans-serif;
text-transform:uppercase;
font-size:0.7em;
color:#ffffff;
margin:0 0 0 0;
}
/* hack to correct IE5.5 faulty box model */
* html .menu {
width:900px; 
w\idth:900px;
}

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

.menu ul li {
float:left;
position:relative;
width:123px;
text-align:center;
background-color:#333333;
}

.menu ul li a {
text-decoration:none;
color:#ffffff;
line-height:25px;
display:block;
height:25px; 
padding:0;
}
.menu ul li a:hover {
background-color:#333333;
color:#ffffff;
}

.menu ul li ul li {
border-bottom:1px solid #000000;
border-left:0px;
background-color:#333333;
text-align:left;
}
.menu ul li ul li a:link,
.menu ul li ul li a:visited {
color:#ffffff;
padding-left:10px;
}
.menu ul li ul li a:hover {
background-color:#cccccc;
color:#333333;
}

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

/* 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:25px;
left:0px;
border:0px;
padding:0 0 0 0;
}

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

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

/* style the top level hover */
.menu a:hover, .menu ul ul a:hover{
color:#ffffff; 
}

.menu :hover > a, .menu ul ul :hover > a {
color:#ffffff;
}

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