.menu {
position:relative; 
z-index:1000;
}

/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
width:140px;
padding:0;
margin:0;
list-style-type:none;
}
/* position relative so that you can position the sub levels */
.menu li {
position:relative;
}

/* get rid of the table */
.menu_table {position:absolute; top:0; left:0; z-index:100;}

/* style the links */
.menu a, .menu a:visited {
display:block; 
text-decoration:none;
height:25px;
width:140px;
color:#FFF;
font:bold 13px/25px "Trebuchet MS", Helvetica, Arial, sans-serif;
text-indent:5px;
border-bottom:1px solid #FC0;

background:inherit;
}

/* style the link hover */
.menu a:hover{
color:#FC0;
background-color:#2684D4;
}

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
visibility:hidden;
position:absolute;
width:200px;
border:solid 1px #FFF;
background-color:#2664a1;
top:-5px;
left:140px; 
}

.menu ul ul a, .menu ul ul a:visited {
display:block; 
text-decoration:none;
height:25px;
color:#FFF;
width:200px;
font:bold 13px/25px "Trebuchet MS", Helvetica, Arial, sans-serif;
text-indent:5px;
border-bottom:1px solid #FC0;
background:inherit;
}

.menu ul ul a:hover {
color:#FC0;
background-color:#2684D4;
}

.top_border {border-top:solid 1px #FC0;}

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