.menulist, .menulist ul {
    margin: 			0;
    padding: 			0;
    width: 				178px;
    list-style: 		none;
    background:			white
}
.menulist ul {
    display: 			none;
    position: 			absolute;
    top: 				3px;
    left: 				173px;
}
.menulist li {
    position: 			relative;
    width:  			178px;
}
.menulist a:link, .menulist a:active, .menulist a:visited {
	color: 				#660099;
}
/* Links inside the menu */
.menulist li a {
    display: 			block;
    padding: 			3px;
    color: 				#660099;
    text-decoration: 	none;
    border: 			1px solid #FFF;
    margin: 			0;
    height:				15px;
}
.menulist li li a {
	border:				0;
	border-bottom: 		1px solid #330066;
}
.menulist li ul {
	border: 			1px solid #330066;
	border-bottom:		0;
	margin:				0;
	padding:			0;
}
.menulist li a span {
	color:				#FF0099;
	padding-right:		10px;
	font-size:			1.2em;
}

/*
 Lit items: hover/focus = the current item. 'highlighted' = parent items to visible menus.
 Here, active items are given a border, and a padding tweak to 'elevate' the text within.
 Feel free to use background-image:url(file.gif) instead of background-color:#nnn here...
*/
.menulist a:hover, .menulist a.highlighted:hover, .menulist a:focus {
     background-color: 		#E3CAFF;
     border: 				1px solid #330066;  
}
.menulist a.highlighted {
	background-color: 		#E3CAFF;
    border: 				1px solid #330066;
}
.menulist ul a:hover, .menulist ul a:hover, .menulist ul a.highlighted:hover, .menulist ul a:focus, .menulist ul a.highlighted {
	border:					0;
	border-bottom:			1px solid #330066;
}
/*
 If you want per-item background images in your menu items, here's how to do it.
 1) Assign a unique ID tag to each link in your menu, like so: <a id="xyz" href="#">
 2) Copy and paste these next lines for each link you want to have an image:
    .menulist a#xyz {
      background-image: url(out.gif);
    }
    .menulist a#xyz:hover, .menulist a.highlighted#xyz, .menulist a:focus {
     background-image: url(over.gif);
    }
*/
/*
 HACKS: IE/Win:
 A small height on <li> and <a> tags and floating prevents gaps in menu.
 * html affects <=IE6 and *+html affects IE7.
 You may want to move these to browser-specific style sheets.
*/
*+html .menulist li {
 float: left;
 height: 1%;
}
*+html .menulist a {
 height: 1%;
}
* html .menulist li {
 float: left;
 height: 1%;
}

* html .menulist a {
 height: 1%;
}
/* End Hacks */