Résolu Menu à tiroirs qui disparaissent

Bonjour,

Voilà 3 jours maintenant que j'ai ce phénomène, vais essayer d'expliquer :

ce sont mes menus sous le header  par exemple pour les "Indiens", lorsqu'on passe la souris dessus, y'a comme des tiroirs avec des catégories qui s'ouvrent, et maintenant, chaque fois que je veux aller dessus .... pof!! ça disparaît, je ne peux plus y avoir accès - je pensais que c'était temporaire, mais là du coup de pense qu'il y a un problème .... mais voilà ..... lequel !?

Si toutefois quelqu'un peut me donner une solution du pourquoi et comment faire ; ce serait avec plaisir - Merci par avance

Sylvie

Bonsoir C.Sylvie,

As-tu remarqué que, lorsque tu déplaces ton curseur sur les images situées sous ton menu, un petit carré apparaît (copie d'écran).

C'est dû à quelques anomalies dans les codes d'insertion desdites images. Après les avoir  copiés sur mon blog d'essais et les avoir remis correctement ce petit carré a disparu.

Je ne pense pas toutefois qu'il y ait un lien avec le problème que tu rencontres, le phénomène ne s'étant pas reproduit sur mon blog, mais sait-on jamais avec les mystères de l'informatique !... 

Ci-dessous les codes à copier/coller aux lieu et place des tiens.

<div style="position: absolute; top: 690px; margin-left: -25px;">
<img src="http://ekladata.com/hZjQ1cRXkYYjOKChsaCqrBIvpe0/loup.gif" alt="" 
width="350" height="280" />&nbsp;</div>
<div style="position: absolute; top: 60px; margin-left: 300px;">
<img src="http://ekladata.com/xUxSKm5-e-MVk2zTLbYm20sOO7s/71h6og.gif" alt="" 
width="160" height="150" /></div>
<div style="position: absolute; top: 820px; margin-left: 926px;">
<img src="http://ekladata.com/WnvfZ5y6v__fGMMlVeADmrC01iA/66589.gif" alt="" 
width="306" height="333" /></div>
<div style="position: absolute; top: 660px; margin-left: 795px;">
<img src="http://ekladata.com/oLgDAwLfngE5ZFoY0pLFj2p_S_g/elephant13.gif" alt="" 
width="182" height="196" />&nbsp;</div>
<div style="position: absolute; top: 670px; margin-left: 310px;">
<img src="http://ekladata.com/jZft7UNGPy61lYbG3gPOvU2vGmM/GIL-Indiens.gif" alt=""
 width="500" height="350" /></div>​

Bonne soirée.

Bonsoir,

@C.Sylvie >

Pour le problème de tes "tiroirs" (le vrai nom c'est : éléments du menu), le problème vient de ce que le haut des images du dessous recouvrent légèrement l'espace occupé par le lien (le haut de la plume de l'indien).
De ce fait le pointeur atteint l'image avant de terminer le survol du bouton  et n'a pas la possibilité d'atteindre le premier élément du menu.

Il faut donc ajuster le positionnement, mais le plus simple et je pense le plus rapide est pour moi de placer le menu sur un calque virtuel à un niveau au dessus des images.(propriété css : z-index )

Dans modifier le thème, ligne 419 et suivantes, tu ajoutes ce qui est en rouge:

note : le #menu est à la fin d'une longue ligne d'écriture.

#menu {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    position: absolute;
    left: 50px;
    top: 500px;
    z-index: 2;
}

@Colette95 >   en bidouillant je n'ai même pas vu ce petit carré blanc qui apparait avec le pointeur  

Chez moi ce petit carré disparait si je désactive Javascript ! !   (?)

Bonnes suites

Bonjour et Merci bien à vous deux - Désolé Stomalo, je n'ai pas trop compris ta solution du calque virtuel (elle se trouve où la ligne 419 dans modifier le thème ?).

Du coup j'ai opté pour la solution de Colette95 et j'ai repositionné mes GIF - Eurika!! tout refonctionne bien.

Un grand Merci à vous - Bonne journée

Tu t'es bien débrouillée en repositionnant et modifiant la taille de certaines images, mais tu as toujours le carré qui suit le curseur quand tu les survoles.

J'ai repris tes modifications et te mets ci-dessous les codes actualisés qu'il faut copier/coller à la place des tiens pour que celui-ci disparaisse.

<div style="position: absolute; top: 690px; margin-left: -25px;">
<img src="http://ekladata.com/hZjQ1cRXkYYjOKChsaCqrBIvpe0/loup.gif" alt="" 
width="313" height="250" />&nbsp;</div>
<div style="position: absolute; top: 60px; margin-left: 300px;">
<img src="http://ekladata.com/xUxSKm5-e-MVk2zTLbYm20sOO7s/71h6og.gif" alt="" 
width="160" height="150" /></div>
<div style="position: absolute; top: 820px; margin-left: 926px;">
<img src="http://ekladata.com/WnvfZ5y6v__fGMMlVeADmrC01iA/66589.gif" alt="" 
width="306" height="333" /></div>
<div style="position: absolute; top: 698px; margin-left: 785px;">
<img src="http://ekladata.com/oLgDAwLfngE5ZFoY0pLFj2p_S_g/elephant13.gif" alt="" width="182" height="196" />&nbsp;</div>
<div style="position: absolute; top: 720px; margin-left: 360px;">
<img src="http://ekladata.com/jZft7UNGPy61lYbG3gPOvU2vGmM/GILIndiens.gif" alt="" width="400" height="250" /></div>

Bonne journée. 

@C.Sylvie

Bonjour,

Désolé aussi. En fait je me suis mal exprimé et "trop d'infos tue l'info".
J'aurais du écrire plus simplement. 

Pour obtenir le même résultat il suffisait d'ajouter le css :
#menu {z-index: 2;} 

mais l'essentiel c'est que ça refonctionne

Bonne journée.

Oui comme tu dis : l'essentiel est que ça refonctionne.

Oup's exact Colette, dans mon enthousiasme j'ai zappée de noter mes codes sur une note à part - 

  Merci