Todas las paginas web actualmente usan menus que convinados con el poder de las hojas de estilo CSS nos crean los mas lindos menus que podamos crear. En esta ocacion les quiero mostrar el poder que tiene el CSS convinandolo con listas para crear un lindo menu cada uno con un estilo diferente.

Bien el codigo que usaremos como css seria este :

< View plain text >
css

  1. .mac {
  2.     font-size: 11px;
  3.     padding-left: 17px;
  4.     margin-left: 2px;
  5.     margin-bottom: 5px;
  6.     background:url(images/macosx.gif) bottom left no-repeat;
  7.     List-style:none;
  8. }
  9.  
  10. .wordpress {
  11.     font-size: 11px;
  12.     padding-left: 17px;
  13.     margin-left: 2px;
  14.     margin-bottom: 5px;
  15.     background:url(images/wordpress.gif) bottom left no-repeat;
  16.     List-style:none;
  17. }

Y para aplicarlo a nuestra lista quedaria algo asi:

< View plain text >
HTML

  1. <ul>
  2. <li class="mac">Usando <a href="http://www.apple.com">Macintosh</a></li>
  3. <li class="wordpress">Powered by <a href="http://www.wordpress.org">Wordpress</a></li>
  4. </ul>

Esto nos daria como resultado algo asi: