Menu Css

En esta ocasión les traigo un pequeño codigo hecho en CSS con el cual podremos crear un menu con efecto OnMouseOver, el cual es muy similar a muchos scripts escritos en javascript, que nos brindan el mismo efecto.

Este efecto basicamente es el siguiente, cuando esta en reposo la seccion del menú tiene un color y cuando esta activo tiene uno diferente, al igual que cuando damos click, toma un tercer color.

Bueno sin mas explicaciones les dejo el codigo.
CSS:

PLAIN TEXT
CSS:
  1. <style type="text/css">
  2. #menu div.barraMenu,
  3. #menu div.barraMenu a.botonMenu {
  4. font-family: sans-serif, Verdana, Arial;
  5. font-size: 8pt;
  6. color: white;
  7. }
  8.  
  9. #menu div.barraMenu {
  10. text-align: left;
  11. }
  12. #menu div.barraMenu a.botonMenu {
  13. background-color:#0099FF;
  14. color: white;
  15. cursor: pointer;
  16. padding: 4px 6px 2px 5px;
  17. text-decoration: none;
  18. }
  19. #menu div.barraMenu a.botonMenu:hover {
  20. background-color:#0066FF;
  21. }
  22. #menu div.barraMenu a.botonMenu:active {
  23. background-color:#0000CC;
  24. color: white;
  25. }
  26. </style>

HTML:

PLAIN TEXT
HTML:
  1. <div id="menu">
  2.     <div class="barraMenu">
  3.       <div align="center">
  4.             <a class="botonMenu" href="">Inicio</a>
  5.             <a class="botonMenu" href="">Servicios</a>
  6.             <a class="botonMenu" href="">Portafolio</a>
  7.             <a class="botonMenu" href="">Contacto</a>
  8.       </div>
  9.     </div>
  10. </div>