Foros del Web » Creando para Internet » CSS »

Menu desplegable CSS

Estas en el tema de Menu desplegable CSS en el foro de CSS en Foros del Web. Hola, tengo un problema haciendo un desplegable en un menu ya hecho. Tengo el siguiente codigo: @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código CSS: Ver original #header #navigation { ...
  #1 (permalink)  
Antiguo 14/04/2011, 02:12
 
Fecha de Ingreso: julio-2010
Mensajes: 47
Antigüedad: 7 años, 4 meses
Puntos: 1
Menu desplegable CSS

Hola, tengo un problema haciendo un desplegable en un menu ya hecho.
Tengo el siguiente codigo:

Código CSS:
Ver original
  1. #header #navigation {
  2.     width: 1000px;
  3.     clear: both;
  4.     float: none;
  5.     overflow: hidden;
  6.     background-image: url(navigati.jpg);
  7.     background-repeat: repeat-x;
  8.     background-position: right bottom;
  9.     padding-bottom: 7px;
  10. }
  11. #header #navigation li {
  12. }
  13. #header #navigation li a {
  14.     text-decoration: none;
  15.     color: #E4E4E4;
  16.     background-image: url(navigatj.jpg);
  17.     background-repeat: no-repeat;
  18.     background-position: 0 -120px;
  19.     padding-right: 25px;
  20.     padding-left: 25px;
  21.     margin-top: 13px;
  22.     text-transform: uppercase;
  23.     font-weight: bold;
  24.     font-size: 12px;
  25.     height: 26px;
  26.     padding-top: 4px;
  27.     text-shadow: 1px 1px #444;
  28.     white-space: nowrap;
  29.     display: block;
  30.     float: left;
  31. }
  32. #header #navigation li a:hover {
  33.     text-decoration: none;
  34.     color: #FFF;
  35.     background-position: 0 0;
  36.     height: 25px;
  37.     padding-top: 5px;
  38. }
  39. #header #navigation li.end {
  40. }
  41. #header #navigation li.end a {
  42.     background-image: url(navigati.png);
  43.     height: 30px;
  44.     background-position: 0px 0px;
  45.     font-size: 14px;
  46.     padding-top: 13px;
  47.     margin-top: 0px;
  48.     width: 256px;
  49.     padding-right: 0px;
  50.     padding-left: 0px;
  51.     text-align: center;
  52.     color: #FCE9EA;
  53.     text-shadow: 1px 1px #8D1018;
  54. }
  55. #header #navigation li.end a:hover {
  56.     background-position: -256px 0px;
  57.     height: 29px;
  58.     padding-top: 14px;
  59. }


Eso anda bien, es un menu simple sin desplegable, pero al querer agregarle el desplegable no anda, es decir el menu simple sigue andando bien pero el desplegable no se ve, lo que le agregue fue esto:

Código CSS:
Ver original
  1. #header #navigation ul {
  2.     display: none;
  3.     background: #cac99e;
  4.     padding: 5px 0;
  5.     position: absolute;
  6.     margin: 42px -125px;
  7. }
  8. #header #navigation ul:hover {
  9.     display: block;
  10. }


El codigo HTML es este:
Código HTML:
Ver original
  1. <ul id="navigation">
  2.    <li><a href="index.html">Inicio</a></li>
  3.    <li><a href="servicios.html">Servicios</a>
  4.       <ul>
  5.          <li><a href="serv1.html">Servicio 1</a></li>
  6.       </ul>
  7.    </li>
  8.    <li><a href="contacto.php">Contacto</a></li>
  9. </ul>


Debe ser alguna tonteria, pero no se mucho de CSS, y esto es lo unico que quiero hacer por ahora, se que hay muchos tutoriales pero no puedo implementarlo en este caso... cuando disponga de mas tiempo aprendere mas, pero por el momento alguien me puede echar una maano? se lo agradeceria mucho!

gracias desde ya, saludos
  #2 (permalink)  
Antiguo 14/04/2011, 05:22
Moderador
 
Fecha de Ingreso: julio-2009
Mensajes: 11
Antigüedad: 8 años, 5 meses
Puntos: 0
Respuesta: Menu desplegable CSS

Ya tienes el javascript para que funcione tu desplegable ?
  #3 (permalink)  
Antiguo 14/04/2011, 06:40
 
Fecha de Ingreso: marzo-2011
Mensajes: 119
Antigüedad: 6 años, 9 meses
Puntos: 9
Respuesta: Menu desplegable CSS

Hola

Por que no esas jquery , o te dejo aqui dos ejemplos , espero que te sirva de algo

Ejemplo de menu desplegable con cssVer ejemplo

Menu desplegable con jqueryVer ejemplo aqui.

si necesitas ayuda puedes contactar conmigo
  #4 (permalink)  
Antiguo 14/04/2011, 10:08
 
Fecha de Ingreso: julio-2010
Mensajes: 47
Antigüedad: 7 años, 4 meses
Puntos: 1
Respuesta: Menu desplegable CSS

Cita:
Iniciado por Alejandrogm Ver Mensaje
Ya tienes el javascript para que funcione tu desplegable ?
El tutorial que encontre no decia nada de javascript
Igualmente ya lo solucione!

Como dijo saul123 use jquery y con ayuda de otro tutorial lo he conseguido ,

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 09:10.