#menu {
width: 733px; /* ancho total del menu */
/* background: #776CAC; /* color de todo el menu */
float: left; /* ubicacion del cuadro de fondo - podrķa traer problemas!*/
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
width: 82px; /* ancho del menu (o del dropdown?!) */
float: left; /* hace que sea horizontal - no sacar */
}

#menu h3 {			/* segundo nivel de links */
	display: block;
	width: 90px;
	border-width: 1px;
	border-style: solid;
	border-color: #ccc;
	margin: 0;
	padding: 6px 4px;
	background: #F3F3F3;
	text-decoration: none; /* para evitar el subrayado */
	font-family: arial, helvetica, sans-serif;
	font-size: 12px;
	line-height: 20px;
	font-weight: bold;
	text-align:left;
}

#menu h3 a {
	color: #666666;
	text-decoration: none;	 /* para evitar el subrayado */
}

#menu h2 { /* primer nivel de links */
	display: block;
	border-width: 0px;
	margin: 0;
	padding: 3px 10px;
	color: #e4dfff;
	background: #776CAC;
	font-family: arial, helvetica, sans-serif;
	font-size: 13px;
	line-height: 16px;
	font-weight: bold;
}

#menu h3 a:hover {
color: #776CAC;
/* background: #fff; */  /* fondo cuando se hace el hover */ 
}


#menu li {position: relative;} /* POSITIONING POP OUT DROPS */ 

#menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
}

#menu ul ul { /*FIXING MENUS ON TOP OF THE TEXT - SO THAT IT WON'T MOVE THE REST OF THE SITE (level 3 tho) */ 
position: absolute;
z-index: 500;
}

div#menu ul ul { /* hide the second level menu (top choice) as we only want the <h2> heading to remain visible */
display: none;
}

div#menu ul li:hover ul /* revealing them again */ 
{display: block;} 

div#menu ul ul, /* for 3 levels of menu */
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

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

body { /* FOR IE */ 
behavior: url(csshover.htc);
}

/* HOPEFULLY UNNECESARY */

[if IE]>
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc); 
font-size: 90%; 
}

#menu ul li {float: left; width: 90px} /* WIDTH CON NUMERO arruina horizontalidad - SINNUMERO SOLO ARRUINA LA VERTICALIDAD DE LOS SUBMENUES*/
 #menu ul li a {height: 1%;}  /* ni idea lo que hace, uno de los cuadritos se hace mas alto y los demas quedan iguales */ 

#menu h3, #menu h2 {
font: bold 12px/13px arial, helvetica, sans-serif;   /* changes font style to another one */
}
</style>
<![endif]