Menus simples con CSS y listas

Existiendo en internet una infinidad de estos ejemplos, me animé a hacer otro más, ¿por qué? pues para explicar un poco que ventajas tienen estos menús con respecto a otros que se hacen con tablas para cada item y javascript para hacer los efectos al pasar el mouse.

En estos ejemplos estoy usando listas desordenadas y CSS básico, para lograr el formato y los efectos al pasar el mouse sobre ellos.

Bueno dejémonos de palabrería y vayamos a la acción, los 2 menús tienen la misma estructura lo único que cambia es el código CSS y el identificador, veamos:

Menu Vertical

HTML

<div id="menuv">
<ul>
<li><a href="#menuv">Inicio</a></li>
<li><a href="#menuv">Comentarios</a></li>
<li><a href="#menuv">Noticias</a></li>
<li><a href="#menuv">Contacto</a></li>
<li><a href="#menuv">Acerca de nosotros</a></li>
</ul>
</div>

CSS

#menuv {
border: 1px solid #ACCFE8;
border-width: 1px 1px 0 1px;
width: 150px;
font: 80% "Trebuchet MS", Arial, Helvetica, sans-serif;
}
#menuv ul, li {
list-style-type: none;
}

#menuv ul {
margin: 0;
padding: 0;
}

#menuv li {
border-bottom: 1px solid #ACCFE8;
}

#menuv a {
text-decoration: none;
color: #3366CC;
background: #F0F7FC;
display: block;
padding: 3px 6px;
width: 138px;
}

#menuv a:hover {
background: #DBEBF6;
}

Usuarios que han visto este tema también han visto...

- Redondear esquinas de una tabla
- Menú de imágenes con CSS
- CSS para campos textarea de formulario
- Opacity en CSS
- Barra de desplazamiento a medida en CSS

- Versión imprimible de este documento

- Enviar por e-mail este documento