Menu de un nivel en XHTML y CSS


/ Published in: CSS
Save to your folder(s)

Un sencillo menú realizado con CSS y un par de imágenes haciendo de \\\\\\\\\\\\\\\"bullets\\\\\\\\\\\\\\\".\\\\\\\\r\\\\\\\\nEs una pequeña variación del que se encuentra en el tutorial de CSS de librosweb.com


Copy this code and paste it in your HTML
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <style type="text/css" media="all">
  6. ul.menu{
  7. width:200px;
  8. list-style:none;
  9. border:1px solid #7C7C7C;
  10. border-bottom:none;
  11.  
  12. margin:0;
  13. padding:0;}
  14.  
  15. ul.menu li{
  16. border-bottom:1px solid #7C7C7C;
  17. background: #F4F4F4;
  18. background-image: url(imagenesEjercicio10/flecha_inactiva.png);
  19. background-repeat: no-repeat;
  20. background-position: 0.2em 50%;
  21. }
  22.  
  23. ul.menu li a:link, ul.menu li a:visited {
  24. padding: .2em 0 .2em 24px;
  25. /* Al mostrar en bloque el enlace es todo el ancho*/
  26. display: block;
  27. text-decoration: none;
  28. color: #333;
  29. }
  30.  
  31. ul.menu li:hover{
  32. background-color: #E0E0E0;
  33. background-image: url(imagenesEjercicio10/flecha_activa.png);
  34. background-repeat: no-repeat;
  35. background-position: 0.2em 50%;
  36. }
  37. </style>
  38. <title>Sencillo menu en CSS</title>
  39. </head>
  40.  
  41. <body>
  42. <ul class="menu">
  43. <li><a href="#" title="Enlace 1">Enlace 1</a></li>
  44. <li><a href="#" title="Enlace 2">Enlace 2</a></li>
  45. <li><a href="#" title="Enlace 3">Enlace 3</a></li>
  46. <li><a href="#" title="Enlace 4">Enlace 4</a></li>
  47. <li><a href="#" title="Enlace 5">Enlace 5</a></li>
  48. <li><a href="#" title="Enlace gen������©rico">Elemento 6</a></li>
  49. </ul>
  50. </body>
  51. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.