Si algo he estado utilizando mucho últimamente para proyectos personales son los menu de navegación en bloques y en dos líneas. Ya que son simples, y a la vez el efecto en Mouseover es algo que me gusta mucho como se visualizan. A su vez, tratándose de un menu de navegación, la segunda línea siempre es una buena opción para añadir una breve descripción o un fragmento de texto adicional que acompañe el titulo principal de nuestro botón. Para mis proyectos estaba utilizando un código personal, pero hoy, acabo de ver en vikiworks (un diseñador que admiro mucho) otra alternativa para lograr este tipo de menu.
Ver Demo - Mas info y Descarga A CSS Block Navigation Menu by vikiworks
El fragmento de código que comparte yichi
#menu ul { margin:0;padding:0; }
#menu ul li { display:block;padding:0; float:left;text-align:left;margin-right:2em; }
#menu li a { color:#fff;font:bold 14px georgia;text-decoration:none;line-height: 1.3em; display:block; }
#menu li a:hover { color:#ffc300; }
#menu li span { font:11px arial; color:#666; margin:0; }
#menu li span:hover {color:#999;}
La estructura de nuestro menú
<li><a href="#">Menu01<br /><span>Short desc</span></a></li>
<li><a href="#">Menu02<br /><span>Short desc</span></a></li>
<li><a href="#">Menu03<br /><span>Short desc</span></a></li>
</ul></div>
2 Comentarios por usuarios
gracias por los recursos,
Excelente gracias !!