Foros del Web » Creando para Internet » CSS »

como adapto mi menu a uno desplegable

Estas en el tema de como adapto mi menu a uno desplegable en el foro de CSS en Foros del Web. Hola a todos! Vereis esque tengo un menu que quiero hacer desplegable, pero el desplegable tengo que adaptarlo al que tengo actualmente y no se ...
  #1 (permalink)  
Antiguo 06/07/2010, 05:11
 
Fecha de Ingreso: abril-2010
Mensajes: 62
Antigüedad: 7 años, 8 meses
Puntos: 0
como adapto mi menu a uno desplegable

Hola a todos!

Vereis esque tengo un menu que quiero hacer desplegable, pero el desplegable tengo que adaptarlo al que tengo actualmente y no se como hacerlo, os dejo el css de los dos y si necesitais algun dato mas o la imagen del menu o algo decidmelo.

Si creeis que hay alguna forma mejor de hacer mi menu desplegable que no sea adaptandolo al que he encontrado, explicadmela por favor =)

Este es el css del menu que tengo actualmente
Código CSS:
Ver original
  1. /* Menu */
  2.  
  3. #menu {
  4.     width: 1000px;
  5.     margin: 0 auto;
  6.     padding: 0;
  7.     height: 50px;
  8.     background: url(images/img02.jpg) no-repeat left top;
  9. }
  10.  
  11. #menu ul {
  12.     margin: 0;
  13.     padding: 0;
  14.     list-style: none;
  15. }
  16.  
  17. #menu li {
  18.     display: inline;
  19. }
  20.  
  21. #menu a {
  22.     display: block;
  23.     float: left;
  24.     height: 32px;
  25.     margin: 0;
  26.     padding: 18px 20px 0 30px;
  27.     text-decoration: none;
  28.     text-transform: capitalize;
  29.     background: url(images/img03.jpg) no-repeat right top;
  30.     font-family: Georgia, "Times New Roman", Times, serif;
  31.     font-size: 12px;
  32.     color: #FFFFFF;
  33. }
  34.  
  35. #menu a:hover {
  36.     color: #FFFFFF;
  37. }
  38.  
  39. #menu .current_page_item a {
  40.     color: #FFFFFF;
  41. }

Y este del menu desplegable que encontre
Código CSS:
Ver original
  1. * {margin: 0px;
  2. padding: 0px; outline: 0;
  3. }
  4. html, body {width: 100%;
  5. }
  6. body {background: #fff;
  7. font-family: Verdana, Arial, Helvetica, sans-serif;
  8. }
  9. #menu {text-align: center;
  10. font-size: 0.7em;
  11. width: 820px;
  12. margin: 20px auto;
  13. }
  14. #menu ul {list-style-type: none;
  15. }
  16. #menu ul li {width: 162px;
  17. }
  18. #menu ul li.nivel1 { float: left;
  19. margin-right: 1px;
  20. }
  21. #menu ul li a {display: block;
  22. text-decoration: none;
  23. color: #fff;
  24. background-color:#00bf2b;
  25. border: solid 1px #0a4e03;
  26. padding: 8px;
  27. position: relative;
  28. }
  29. #menu ul li a.nivel2, #menu ul li a.nivel2ie {color: #000;
  30. }
  31. #menu ul li a.nivel1, #menu ul li a.nivel2 {display: block!important;display: none;
  32. position: relative;
  33. }
  34. #menu ul li:hover {position: relative;
  35. }
  36. #menu ul li a:hover, #menu ul li:hover a.nivel1 {background-color: #6CC;
  37. color: #000;
  38. position: relative;
  39. }
  40. #menu ul li ul {display: none;
  41. }
  42. #menu ul li:hover  ul.nivel2, #menu ul li a:hover  ul.nivel2{display: block;
  43. position: absolute;left: 0px;
  44. }
  45. #menu ul li ul li a:hover ul.nivel3, #menu ul li ul li:hover ul.nivel3 {display: block;
  46. position: absolute;
  47. left: 161px!important;left: 160px;
  48. top:0px!important;top: -21px;
  49. }
  50. #menu ul li ul li a {width: 160px;
  51. padding: 8px 0px;
  52. border-top-color: transparent;
  53. }
  54. #menu ul li ul li a:hover {border-top-color: #000;
  55. position: relative;
  56. }
  57. #menu ul li ul li ul li a.primera {border-top-color: #fff;
  58. }
  59. table.falsa {border-collapse:collapse;
  60. border:0px;
  61. float: left;
  62. position: relative;
  63. }

Gracias!

Etiquetas: desplegable
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 07:29.