body{

background-image:url(fondo4.jpg);
behavior: url("csshover.htc");
}

#cabecera{
background-image:url("background_spring.gif");
background-repeat:repeat-x;
}

#menu{
	width:9em;/*se hace un ancho mas corto a todo el bloque*/
/*	background:green;/*se cambia el color de fondo de todo el bloque*/
	
	background:blue;
}

/* se juntan todos los elementos de la lista*/
#menu ul{
	list-style:none;/*se les quita el punto a la lista*/
	margin:0;/* se necesita ser cero por problemas de algunos navegadores*/
	padding:0;/*  disminuye el espacio entre elementos*/
}

/*en general*/
#menu a,h2{
	font:bold 17px/22px comic-sans,arial,helvetica;/*tipo de letra*/
	display:block;/* verlo en forma de bloque */
	border-style:solid;/*marca las barras de los margenes*/
	border-width:1px;/*ancho del borde*/
	border-color:white white white white;/*color de los bordes*/
	margin:0; /* juntar los margenes */
	padding: 2px 3px; /* separar elementos de sus bloques */
}

/*en particular */
#menu h2{
	color: white;
	/*background:green;*/
	background:blue;  /*PONEMOS A LA ORILLA COLOR AZUL FUERTE*/
	
	text-transform:uppercase;/*transforma el texto a mayusculas*/
}

#menu a{
	text-decoration:none;/* le quita el subrayado al link*/
	color: #FFFFFF; /*PONEMOS LAS LETRAS EN COLOR BLANCO ANTES WHITE*/
	background:#009900;  /* PONEMOS COLOR VERDE CLARITO AL FONDO DE LOS BOTONES DEL MENU*/
}

#menu a:hover{
	color:WHITE;/* cambian de color las letras al posar el mouse sobre el link */
	background:darkgreen;/*cambia de color el fondo*/
}

/* segundo nivel de la lista */
#menu ul ul{
	position:absolute;/* justifica el bloque hacia el texto*/
	top:0;/*mueve el segundo nivel hacia arriba */
	left:0;/*mueve el segundo nivel hacia la izquierda*/
}

/*es importante que primero se sube el segundo nivel,  se acomoda y luego se vuelva a acomodar 
  por eso se restructura dos veces el segundo nivel */
#menu li{
	position: relative;/* los elementos de la lista buscan espacio entre los bloques para acomdarse*/
}


#menu ul ul {
	position: absolute;
	top: 0;
	left: 100%; 
	width: 100%; /*el bloque toma el ancho de todo el texto*/
}

/* ahora ocultamos el segundo nivel que quedo a la derecha*/
div#menu ul ul 
{display: none;}

/*ahora lo "aparecemos"  al darle esta funcion al primer  nivel de la lista y que lo herede todo lo que esta debajo ( los hijos ) .
Si olvidamos heredarlo o usar el hijo ( el ultimo UL de la linea), el menu no se hara visible*/
div#menu ul li:hover ul
{display: block;}