Ayuda menu desplegable

[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.