Ayuda menu desplegable

[aagguuu]

Hola a todos nuevamente, necesito aver si alguien es tan amable y me puede explicar como hacer un menu desplegable, pero que NO salga para el costado, sino que en el div donde esta se agrande, nose si entienden, les dejo un ejemplo para que vean. Aca http://www.onlysigs.com/ en la parte donde dice >> Recursos de PS y cuando pasas el mouse se abre el menu, y cuando lo sacas se cierra. Espero que me puedan ayudar :D Gracias

[sanxuan]

Puedes usar CSS.

Código CSS:

.oculto{ display:hidden; }
.oculto:hover{ display:block; }
 

y una estructura HTML parecida a esta:

Código HTML:

<ul>
<li>elemento1</li>
<li>elemento2
     <ul class="oculto">
         <li>nivel2</li>
     </ul>
</li>
</ul>
 

[jomaruro]

Hola:

En las FAQ's de CSS existen varios ejemplos de menús desplegables, échales un vistazo quizá alguno te sirva.

Saludos.

[aagguuu]

@sanxuan gracias por la ayuda, pero como podria hacer eso si yo tengo por ejemplo la opcion ">> Recursos de PS" en un div. Asi: <div class="opcionmenu">Recursos de PS</div> y para todas las otras opciones uso la misma class. Espero que me puedas ayudar

@jomaruro muchas gracias por los ejemplos, pero ya los habia visto y no los entiendo muy bien.


Gracias a ambos (:

[sanxuan]

Antes de nada perdón porque el ejemplo que te proporcioné pretendía sólo ser orientativo y lo escribí sobre la marcha sin pretender que fuese a funcionar. He mezclado sin querer dos maneras diferentes de ocultar elementos con CSS. He vuelto a leerlo y en realidad debería ser como sigue:

Código CSS:

.oculto ul{ visibility:hidden; }
.oculto:hover ul{ visibility:visible; }
 

Código HTML:

<ul>
  <li>elemento1</li>
  <li class="oculto">elemento2
     <ul >
         <li>nivel2</li>
     </ul>
  </li>
</ul>
 

Repito que no es un ejemplo para copiar, sólo pretende explicar la manera en que funcionan los desplegable. Seguro que necesitarás más propiedades y definir la estructura HTML que se ajuste a tu idea. Si sirve para que entiendas cómo funcionan otros ejemplos más completos me daré por contento.
Puedes añadir la clase oculto (usando el nombre que prefieras) a todas las opciones:
<div class="opcionmenu oculto">Recursos de PS</div>
o bien incluir las propiedades de oculto en las reglas .opcionmenu y .opcionmenu:hover respectivamente.
Te puse un ejemplo con listas desordenadas <ul>, donde las opciones del menú son etiquetas <li>, pero puedes usar otras como <div> en su lugar.
La explicación es sencilla. Hemos creado un código HTML con el contenido de nuestro desplegable. Ocultamos ese contenido con la propiedad visibility:hidden y cuando pasamos con el puntero del ratón sobre el elemento del menú ese contenido se hará visible con visibility:visible gracias a la pseudoclase :hover.

[aagguuu]

Gracias nuevamente por responder, hice lo que me dijiste poniendo en el css:

Código HTML:

#casas{
		margin: 2px;
		background-color: #f2f2f2;
		width: 120px;
		height: auto;
		border-color: #bdbdbd;
   		border-width: 1px;
  		border-style: solid;
}	
.oculto ul{ visibility:hidden; }
.oculto:hover ul{ visibility:visible; }

y en el html esto:

Código HTML:

 <div class="opmenu"><a href="#">Prueba</a></div>
	  <div id="casas" class="oculto">Prueba
	  		<ul>
				<div>prueba</div>
			</ul></div>
	  <div class="opmenu"><a href="#">Prueba</a></div> 

y me queda asi:

Osea la palabra se oculta, pero el div por mas que le ponga height: auto; no se achica al ocultarse, en la imagen 1 miras como se ve cuando pasas el mouse, y en la 2 cuando lo sacas, el div no se achica. Tambien donde dice <div>prueba</div> probe poniendo como me dijiste en los ejemplos vos, <li> pero igualmente sigue sin achicarse el div, espero que me puedas ayudar, disculpa por preguntar tanto. Gracias nuevamente.

[sanxuan]

Deberías repasar HTML. Si colocas la etiqueta <ul> debes incluir en ella un <li> para englobar el contenido. Si no usas <ul> puedes colocar un <div> dentro de otro sin más.
El ejemplo que te he puesto funciona como tu has dicho.
Cambiamos la visibilidad del elemento sin modificar la presentación de la página.
Para hacer un desplegable que desplace a otros elementos como en un control tipo acordeón, puedes usar la propiedad display.

Código CSS:

.oculto div{ display:none; }
.oculto:hover div{ display:block; }
 

Código HTML:

<div class="oculto">
    <div>Contenido oculto ... </div>
</div>
 

[aagguuu]

Nuevamente muchas gracias, pude lograr lo que queria :D
+k