CSS | Desde cero | Parte 4

Con otro tutorial empezamos sin mas relleno, esta vez con algo muy necesitado pero pocas veces muy bien explicado. Un menu vertical, como el que estan viendo debajo.

VINCULO1

option1

option2

option3

Haremos esto utilizando lo ya aprendido en tutoriales anteriores. Después de haber creado un nuevo documento agregaremos lo siguiente:

span.menu{
color:#333;
background:#CCC;
padding:5px;
border:1px solid #333;
margin-left:3px;
}

Agregando asi a la etiqueta "span" con la clase "menu", fondo, borde, relleno, margen y color. Ahora modificaremos la etiqueta "span" al pasar el cursor por encima.

span.menu:hover {
text-decoration:none;
cursor:pointer
}

Luego modificaremos la etiqueta "li",donde escribiremos el texto del submenu.

span.menu li {
display:none; padding:5px;
}
span.menu:hover li{
display:inline;
padding:5px;
}

Con esto haremos que al estar el menu inactivo no se muestre nada, pero al poner el mouse encima se mostrará la etiqueta "li". Esto gracias a "display". Finalmente agregaremos el estilo del submenu que se extendera al pasar el cursor por encima.

.subMenu{
color:#999;
font-size:12px;
text-decoration:none
}
.subMenu:hover{
color:#333;
font-size:12px;
text-decoration:none
}

Quedaria algo asi:

<span class="menu">VINCULO1 <li><a class="subMenu" href="http://google.com/">option1</a></li> <li><a class="subMenu" href="http://yahoo.es/">option2</a></li> <li><a class="subMenu" href="http://mgloob.blogspot.com/">option3</a></li> </span>

Y eso es todo para crear el menu.