index.html
estilo -css
/*Padding: distancia del borde de la etiqueta hacia dentro
Margin: distancia del borde de la etiqueta hacia afuera*/
*{
padding: 0px;
margin: 0px;
}
#header{
/*con el 'auto' el espacio que sobre del ancho lo reparte en 2 partes iguales y asi nos queda centrada */
margin: auto;
width: 500px;
/*tipo de fuente que queremos utilizar*/
font-family: Arial, Helvetica;
}
ul{
/*quitamos los estilos que trae por defecto las listas (°)*/
list-style: none;
}
/*todos los elementos a que esten dentro del elemento li que esten en la class nav se le aplicaran los estilos*/
/*.nav muestra lista del menu principal*/
.nav li a{
/*color de fondo, negro = #000 */
background-color: #000;
/*color de la fuente, blanco = #fff*/
color: #fff;
/*quitamos el subrayado que tenian los elementos a*/
text-decoration: none;
/*ponemos 10px de altura y 15px de ancho*/
padding: 10px 15px;
/*cambiamos el elemento porque el elemento a estan en display inline es decir en linea
por ende todos estaran encima del otro al camnbiarlos quedaran en bloque*/
display: block;
}
/*indicamos que al pasar el cursor del mause en nuestro menu el color cambie*/
.nav li a:hover{
background-color: #434343;
}
/*indicamos que todos los hijos directos del nav se ubiquen hacia la izquierda*/
.nav > li{
float: left;
}
/*todos los 'ul' que esten dentro del elemento li que esten en la class nav se le aplicaran los estilos*/
.nav li ul{
/*de esta manera ocultaremos todos los submenus*/
display: none;
/*esto lo hacemos para obtener una propiedad obsoluta es decir que los submenus esten conforme al menu*/
position: absolute;
/*anchura minima de nuestro elemento*/
min-width: 140px;
}
/*indicamos que al pasar el cursor del mause sobre el menu despliegue los submenus*/
.nav li:hover > ul{
display: block;
}
/*indicamos que todos los submenus tendran posicion relativa al ser posicion relativa nos permite modificarle*/
.nav li ul li{
position: relative;
}
/*propiedades para la nueva posicion de los submenus del 3 nivel*/
.nav li ul li ul{
left: 140px;
top: 0px;
}