#menu {
width:140px;
line-height: 1.2em;
margin-top: 20px;
margin-left: 40px;
float: left;
text-align: left;
font-family: Times New Roman,Verdana, Arial;
font-size: .75em;
/*font-style: italic;*/
} 

#menu ul { /* remove bullets and list indents */
list-style: none;
margin: 0;
padding: 0;
}

/* style, color and size links and headings to suit */
#menu a {
display: block;
margin: 0  0 5px 0;
padding: 3px 0 0px  10px;
font-weight: bold;
height: 28px;
color: #7D25B5;

background-image: url('images/button.gif');

background-position: 0% -33px;
background-repeat: no-repeat;
text-decoration: none;
}
#menu a:hover {
color: #00037B;
background-image: url('images/button.gif');
background-position: 0% 0%;
background-repeat: no-repeat;
}

#menu ul ul a {
display: block;
margin: 0;
padding: 0 6px 0  6px;
width: 200px;
background: #000;
color: #FFBFF8;
border: 1px solid #fff;
height: 20px;
}



#menu ul ul a:hover {
background: #fff;
border: 0;
color: #000;
border: 1px solid #fff;
}




#menu li {
/* make the list elements a containing block for the nested lists */
position: relative;

} 

#menu ul ul {
position: absolute;
top: 0;
right: 215px; /* to position them to the right of their containing block */
width: 100%; /* width is based on the containing block */
}

div#menu ul ul,
div#menu ul li:hover ul ul
{display: none;}

div#menu ul li:hover ul,
div#menu ul ul li:hover ul
{display: block;
}