Ver Mensaje Individual
  #5 (permalink)  
Antiguo 20/02/2011, 10:07
Avatar de sanxuan
sanxuan
 
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 7 años, 9 meses
Puntos: 36
Respuesta: Ayuda menu desplegable

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:
Ver original
  1. .oculto ul{ visibility:hidden; }
  2. .oculto:hover ul{ visibility:visible; }
Código HTML:
Ver original
  1. <ul>
  2.   <li>elemento1</li>
  3.   <li class="oculto">elemento2
  4.      <ul >
  5.          <li>nivel2</li>
  6.      </ul>
  7.   </li>
  8. </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.

Última edición por sanxuan; 20/02/2011 a las 10:18