/* style the outer div to give it width */
.menu {
	width: auto;
	height: auto;
}

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

/* style the sub-level lists */
.menu ul ul {width:10em; height:auto; padding-bottom:10px;}

/* 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;
	height:auto;
	width:auto;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: #FFFFFF;
	text-decoration: none;
}

/* style the sub level list items */
.menu ul ul li {
	display:block;
	width:143px;
	height:auto;
	position:relative;
	padding-bottom:15px;
	/*	background-image: url(../images/test.jpg);
	background-repeat: repeat-y;
	background-position: left bottom;*/
	background-color: #494e86;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-right-color: #CCCCCC;
	border-bottom-color: #CCCCCC;
	border-left-color: #CCCCCC;
}

/* style the links for the top level */
.menu a, .menu a:visited {
	display:block;
	float:left;
	height:26px;
	font-size:11px;
	text-decoration:none;
	color:#FFFFFF;
	width:auto;
	padding-top: 14px;
	padding-right: 16px;
	padding-bottom: 0;
	padding-left: 16px;
}

/* style the sub level links */
.menu ul ul a, .menu ul ul a:visited {
	display:block;
	/*background:#bbb;*/
	color:#FFFFFF;
	width:10em;
	height:auto;
}

.menu ul table ul a, .menu ul table ul a:visited  {
width:12em; 
w\idth:10em;
}


/* style the level hovers */
/* top link */
.menu a:hover {color:#fff; text-decoration:underline;}
.menu :hover > a {color:#fff; text-decoration:underline;}


/* drop down links */
.menu ul ul a:hover{color:#fff;/*background:#ccc;*/}

.menu ul ul :hover > a {color:#fff;/*background:#ccc;*/}


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

/* 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:3.65em;left:0;width:10em;}

/* 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; padding-bottom:3em;}