.menu {}

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

/* style the sub-level lists */
.menu ul ul {}

/* float the top list items to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu ul li {
	float:left; 
	width: 100px;
	display: block;
	padding: 0;
	margin: 0;
}

/* style the sub level list items */
.menu ul ul li {
	width:150px;
	padding: 0;
	margin: 0;
	display: block;
}

.menu a, .menu a:visited {
	float:left;
	text-decoration: none;
	color: #FFFFFF;
	width: 100px;
	display: block;
	border:1px solid #990000;
	background-color:#B22222;
	padding: 3px 0 3px 3px;
	
}

/* style the sub level links */
.menu ul ul a, .menu ul ul a:visited {
	text-decoration: none;
	display: block;
	width: 150px;
	color: #FFFFFF;
	}
.menu ul table ul a, .menu ul table ul a:visited  {
display: block;
color: #FFFFFF;
}
/* style the table so that it takes no part in the layout - required for IE to work */
.menu table {position:absolute; left:0; top:0; font-size:1em; z-index:-1;}
.menu ul ul table {lef\t:-1px;}
.menu ul ul table ul.left {margin-lef\t:2px;}

.menu li:hover {position:relative;}
* html .menu a:hover {position:relative;}

/* first */
.menu a:hover {
text-decoration: none;
	color: #333333;
	background-color: #FFFFFF;}
.menu :hover > a {text-decoration: none;
	color: #333333;
	background-color: #FFFFFF;}
/* second */
.menu ul ul a:hover{text-decoration: none;
	color: #333333;
	background-color: #FFFFFF;}
.menu ul ul :hover > a {text-decoration: none;
	color: #333333;
	background-color: #FFFFFF;}

/* 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;
left:0;
width:150px;
top:20px;
}

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