[z-index] Problème d'empilement

Bonsoir à toute la communauté CCM,

Cela fait bien longtemps que je ne vous ai pas contacté, toutefois le problème auquel je fais face aujourd'hui dépasse mes propres compétences, aussi je m'en remet à vous !

Vous trouverez ci-dessous un lien menant vers la page d'accueil de l'un de mes sites Internet : http://diato.orlulas.fr

Comme vous pourrez le remarquer j'ai récemment tenté d'ajouter un menu déroulant horizontal codé uniquement en CSS3. Malheureusement, une fois affichée les sous-listes se positionnent systématiquement en dessous des autres éléments de la page (comme si elles avaient un z-index=2 car seul l'image de fond de la page est en dessous)...

Le positionnement par z-index n'étant pas ma spécialité, j'ai essayé de comprendre pourquoi ces éléments masqués s'affichent en premier sur la page web alors qu'ils sont tous positionnés (la propriété « z-index » devant donc être prise en compte).

Qu'en dites-vous ? Ai-je commis une erreur ou un oubli dans la partie du code CSS consacrée au menu ? (code accessible depuis http://diato.orlulas.fr/css/style.css

Merci d'avance à tous ceux qui prendront la peine de me donner une réponse, et pardonnez-moi si la même question à déjà été posée...

En attendant, je vous souhaites à tous de passer une bonne nuit et au plaisir de vous lire demain matin ! =]
OrlulaS