website stats » Menú drop down realizado sólo con CSS | Solo Código |

Menú drop down realizado sólo con CSS

Escrito por J.F. el Wednesday, 28 de November del 2007 a las 15:24

Encontrar un menú desplegable hecho solo con CSS sin la ayuda de Javascript es bastante difícil, pero en Pixelpreads han creado uno, sin el uso de Javascript, y con un código bastante simple. Aquí tienes el código CSS:

TEXTO PLANO
CSS:
  1. body{font-family:georgia;}
  2. #container{width:500px;margin:auto;font-size:11pt;}
  3.  
  4. #menu{position:absolute;margin-top:10px;}
  5. #menu ul .item{display:none;}
  6. #menu ul:hover .item{display:block;background:#000;padding:1px;margin:1px;}
  7.  
  8. #menu ul:hover .item a{color:#fff;text-decoration:none;}
  9. #menu ul:hover .item a:hover{color:#999;}
  10.  
  11. #menu ul{width:100px;float:left;margin:0px;padding:2px;background:#b10000;list-style:none;}
  12. .clear{clear:both;height:10px;}

Aquí un ejemplo de su uso. ¡Ojo! No es compatible con Internet Explorer 6.

TEXTO PLANO
HTML:
  2.  
  4. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  5. <title>css drop down</title>
  6. <style type="text/css">
  7. body{font-family:georgia;}
  8. #container{width:500px;margin:auto;font-size:11pt;}
  9.  
  10. #menu{position:absolute;margin-top:10px;}
  11. #menu ul .item{display:none;}
  12. #menu ul:hover .item{display:block;background:#000;padding:1px;margin:1px;}
  13.  
  14. #menu ul:hover .item a{color:#fff;text-decoration:none;}
  15. #menu ul:hover .item a:hover{color:#999;}
  16.  
  17. #menu ul{width:100px;float:left;margin:0px;padding:2px;background:#b10000;list-style:none;}
  18. .clear{clear:both;height:10px;}
  19. </style>
  20.  
  21. </head>
  23. <div id="container">
  24. <h1>css drop down</h1>
  25.  
  26. <div id="menu">
  27.  
  28. <ul id="item1">
  29. <li class="top">menu item</li>
  30. <li class="item"><a href="#">menu item 1</a></li>
  31. <li class="item"><a href="#">menu item 2</a></li>
  32. <li class="item"><a href="#">menu item 3</a></li>
  33. </ul>
  34.  
  35. <ul id="item2">
  36. <li class="top">menu item</li>
  37. <li class="item"><a href="#">menu item 1</a></li>
  38.  
  39. </ul>
  40.  
  41. <ul id="item3">
  42. <li class="top">menu item</li>
  43. <li class="item"><a href="#">menu item 1</a></li>
  44. <li class="item"><a href="#">menu item 2</a></li>
  45. </ul>
  46.  
  47. <ul id="item4">
  48. <li class="top">menu item</li>
  49. <li class="item"><a href="#">menu item 1</a></li>
  50. <li class="item"><a href="#">menu item 2</a></li>
  51.  
  52. <li class="item"><a href="#">menu item 3</a></li>
  53. <li class="item"><a href="#">menu item 4</a></li>
  54. </ul>
  55.  
  56. </div>
  57. </div>
  58. </body>
  59. </html>

Enlace: | Ver demo

Comentarios (1)

Categoria: CSS

1 Comentario

Entradas relacionadas


Comentario de biko8

Realizado el Friday, 30 de January del 2009 a las 12:22

El menu esta muy bien pero con un problema y es que no funciona en todos los navegadores por ejemplo en IE 6 no funciona, devido a que un gran porcentaje de gente aun usa ese navegador no se puede utilizar este menu.
Escribir un comentario

Puedes usar las siguientes etiquetas HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Solo Código

Solo Código es una colección de códigos de todo tipo que pueden resultar útiles para el diseño de páginas web. Está enfocado tanto para aquellos que son expertos, como para aquellos principiantes que quieren encontrar recursos útiles, o no saben implementar determinadas funciones en sus webs. No olvides que Solo Código es un blog de Informática Práctica, donde tenemos otras secciones interesantes como:
| Tutoriales | Trucos | Software | Links | Buscar |