[RESOLU] Menu déroulant horizontal "clignote"

Bonjour,

Je suis en train de créer mon site Internet et c'est grâce à ce site que j'ai pu construire mon menu déroulant horizontal.
Cependant, y'a un hic !!
Lorsque que la pointe du curseur passe pil top entre deux sous menus (dans la partie grise si on prend le tuto texto) la partie de dessous apparait.
Ca fait comme une espèce de clignotement...
Y aurait-il un moyen de résoudre ce problème ?
Voici mon code css :

/*code source chez Alsacreations.com*/
#global {
     position:absolute;
     left: 50%; 
     top: 50%;
     width: 749px;
     height: 595px;
     margin-top: -297px; /* moitié de la hauteur */
     margin-left: -374px; /* moitié de la largeur */
	 z-index: 1;
     }

.haut {
width: 749px ;
height: 135px;
top: 0px;

}
	 
.gauche {
width: 9px;
height: 460px;
position: absolute;
top: 135px;
}
.droite {
width: 7px;
height: 460px;
position: absolute;
top: 135px;
left: 740px;
}
.centre {
width: 733px;
height: 456px;
position: absolute;
top: 135px;
left: 7px;
}
.bas {
width: 733px;
heigth: 4px;
position: absolute;
left: 7px;
top: 591px;
} 
.champstexte {
width:700px; 
Height:420px;
position: absolute; 
top :150px;
left: 20px;
z-index:10;
Overflow: auto;
scrollbar-face-color: #626C22;
scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color:#000000;
scrollbar-darkshadow-color: #000000;
scrollbar-shadow-color: #000000; 
scrollbar-arrow-color: #91A144;
scrollbar-track-color: #91A144;
font-family: Arial, Verdana, sans-serif;
font-size: 11pt;
text-align: justify;
font-weight: bold;
color: #424F01;
padding: 0.2em;
}
h1 { /** gros titre */
  font-family: Arial, Verdana, sans-serif;         /* On se permet un changement de police : pas plus de deux par page, et à utiliser avec parcimonie (c'est le cas) */
  color: white;               /*  Donc on utilise une police blanche pour que le texte soit visible */
  font-variant : small-caps   /* Et on les met en majuscules (les minuscules sont remplacées par des petites majuscules) */
  padding: 0.3em;             /* Espacement intérieur non nul pour que le texte ne colle pas à la bordure du cadre */
  text-align: center;         /* Le titre doit être centré ! */
  letter-spacing: 0.3em;      /* On espace les caractères pour que ce soit joli  [smile] */
}
h2 { /** Les titres de paragraphes */
  text-decoration: underline; /* On souligne ces titres */
  font-variant : small-caps   /* Et on les met en majuscules (les minuscules sont remplacées par des petites majuscules) */
  color: #626C22;             /* Texte de couleur bleu très foncé, presque noir (donc lisible) */
}
h3 { /** Les sous-titres (titres de niveau 3) */
  color: #626C22;             /* Texte de couleur bleu, plus clair que le titre h2 */
  font-style: italic;         /* Texte en italique */
  text-indent: 1em;           /* Et indenté par rapport aux autres titres et paragraphes, pour montrer la hierarchie */
}

body {
margin: 0;
padding: 0;
font: 80% arial, sans-serif;
}


dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
width: 90px;
height: 22px;
}
#menu {
position: absolute; /* placement du menu, à modifier selon vos besoins */
top: 107px;
margin-left: 7px;
left: 5px;
z-index:100;
width: 100%; /* correction pour Opera */
}
#menu dl {
float: left;
width: 90px;
height: 22px;
}
#menu dt {/* fonctionne sur tous les blocs des menus*/
cursor: pointer;
text-align: center;
color: white;
font-weight: bold;
background: #727D37;
background-image: url(images/Bouton.gif);
margin: 1px;
height: 22px;
width: 90px;
}
#menu dd { /* fonctionne sur les blocs sous menus*/
position: absolue;
display: none;
z-index: 10000;
border: 1px solid gray;
width: 90px;
height: 22px;
}
#menu li { /*fonctionne sur les textes des sous menus*/
text-align: center;
background: #95A449;
border: 1px solid black;
width: 90px;
height: 22px;
}
#menu li a, #menu dt a {/* fonctionne sur les liens directs accueil livre d'or*/
color: white;
text-decoration: none;
display: block;
height: 22px;
width: 90px;
border: 0 none;
}
#menu dt a:hover { /* fonctionne sur les liens directs accueil livre d'or*/
background: #95A449;
background-image: url(images/bouton_bas.gif);
}
#menu li a:hover, #menu li a:focus, #menu dt a:focus {/* fonctionne sur les liens survolés des sous menus*/
background: #61730D;
width: 90px !important;
width: 88px;
height: 22px;
font-weight: bold;
}

Merci
Modifié par jewat (08 Apr 2007 - 16:12)

Salut,

Une page en ligne pour constater de visu ce que tu appelle "clignotter", ça aiderait à ce que quelqu'un te réponde

Je vais voir ce matin si mon compte à été activé parce que hier je pouvais tester qu'en local, pas de compte activé encore.
Je vous met le lien dès que c'est en ligne.

Et heu j'ai oublié de préciser ce phénomène se produit que sous Firefox

Hop ca y'est j'ai mis en ligne la page d'accueil.
Vous pourrez voir le soucis sous Mozilla à cette adresse :

http://ratboulettes.free.fr/Accueil.htm

Si quelqu'un peut m'aider, merci

Edité en espérant que ca marche là, vu que j'ai pas accès à la prévisu, désolée
Modifié par jewat (08 Apr 2007 - 11:37)

Salut,

Ton URL ne fonctionne malheureusement pas, tu l'as rédigée sans tenir compte des explications données dans l'Aide du forum et dans la FAQ

Je te suggère vivement d'éditer ton message afin de corriger ce problème.

Je comprends mieux ton problème, en fait quand ton curseur de souris passe du sous menu au menu, le clignottement est provoqué du fait que le sous menu est masqué lorsque le curseur le quitte, et il est réactivé en revenant sur le lien.

Le mieux est de monter ton sous menu pour éviter qu'il n'y ait cet espace d'1px de haut entre le menu et lui. Ainsi le clignottement disparaitra.

Bon alors j'ai fait des tests.
Comme tu m'as dit ça va déjà mieux mais entre chaque ligne de sous-menu le problème reste le même. J'ai essayé d'enlever toutes les bordures mais c'est pas comme margin ça marche pas (normal c'pas un blanc entre deux lignes ).

Voici mon code html du menu :

  <div id="menu"> 
    <dl>
      <dt onmouseover="javascript:montre();"><a href="#Accueil.htm" title="Retour à l'accueil">Accueil</a></dt>
    </dl>
    <dl>
      <dt onmouseover="javascript:montre('smenu1');">Le Rat</dt>
      <dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');"> 
        <ul>
          <li><a href="LeRat.htm#bref">En bref</a></li>
          <li><a href="LeRat.htm#types">Types</a></li>
          <li><a href="LeRat.htm#sexe">Sexe</a></li>
          <li><a href="LeRat.htm#adoption">Adoption</a></li>
        </ul>
      </dd>
    </dl>
    <dl>
      <dt onmouseover="javascript:montre('smenu2');">Habitat</dt>
      <dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');"> 
        <ul>
          <li><a href="Habitat.htm#cage">Cage</a></li>
          <li><a href="Habitat.htm#litiere">Litières</a></li>
          <li><a href="Habitat.htm#entretien">Entretien</a></li>
          <li><a href="Habitat.htm#quarantaine">Quarantaine</a></li>
          <li><a href="Habitat.htm#integration">Intégration</a></li>
          <li><a href="Habitat.htm#jeux">Jeux</a></li>
        </ul>
      </dd>
    </dl>
    <dl>
      <dt onmouseover="javascript:montre('smenu3');">Nourriture</dt>
      <dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');"> 
        <ul>
          <li><a href="Nourriture.htm#melanges">Les mélanges</a></li>
          <li><a href="Nourriture.htm#friandises">Friandises</a></li>
          <li><a href="Nourriture.htm#interdits">Interdits</a></li>
        </ul>
      </dd>
    </dl>
    <dl>
      <dt onmouseover="javascript:montre('smenu4');">Santé</dt>
      <dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('');"> 
        <ul>
          <li><a href="Sante.htm#maladies">Les maladies</a></li>
          <li><a href="Sante.htm#pharmacie">Pharmacie</a></li>
        </ul>
      </dd>
    </dl>
    <dl>
      <dt onmouseover="javascript:montre('smenu5');">Nos rates</dt>
      <dd id="smenu5" onmouseover="javascript:montre('smenu5');" onmouseout="javascript:montre('');"> 
        <ul>
          <li><a href="NosRats.htm#femelles" >Les femelles </a></li>
          <li><a href="NosRats.htm#disparues">Les disparues</a></li>
        </ul>
      </dd>
    </dl>
    <dl>
      <dt onmouseover="javascript:montre('smenu6');">Liens</dt>
      <dd id="smenu6" onmouseover="javascript:montre('smenu6');" onmouseout="javascript:montre('');"> 
        <ul>
          <li><a href="Liens.htm#sites">Sites Internet</a></li>
          <li><a href="Liens.htm#contact">Me Contacter</a></li>
        </ul>
      </dd>
    </dl>
    <dl>
      <dt onmouseover="javascript:montre();"><a href="Livre_dor.htm" title="Livre d'Or">Livre 
        d'Or</a></dt>
    </dl>
  </div>

Et le css : bah j'ai juste enlever la margin 1px au final, puisque le reste n'arrange en rien.

Et la nouvelle page en ligne :

http://ratboulettes.free.fr/Accueil.htm

Sur ta page en ligne maintenant il n'y a plus de bug de "clignottement".

J'ai pas trop compris ce que tu disais à propos des margins. Si tu en as quand même besoin, ne peux tu pas pallier avec un padding ? Ca te permet de conserver une marge tout en restant à l'intérieur de ton objet, alors que le margin est à l'extérieur et crée une sorte de trou par rapport à l'élément proche.
J'ai pas trop le temps de me pencher sur le code en détail, donc à toi de voir si cela peut marcher.

En fait le clignotement n'y est plus au début du sous menu, c'est à dire par exemple entre le rat et en bref. Par contre si on passe pas trop vite entre en bref et types y'a le "B" de bienvenue qui passe au premier plan une demi seconde...Le temps de "glisser" entre les deux parties.

Je te remercie d'avoir pris sur ton temps pour m'aider, je vais essayer de voir avec le padding mais je connais pas trop cette notion donc je vais voir ce que je trouve en faisant des essais !!

Merci

Bon alors j'ai résolu le problème en utilisant un autre code uniquement en css. Sauf que du coup le menu ne se déroule pas sous IE mais marche nikel sur Mozilla.
C'était bien précisé que ça ne fonctionnerait pas sous IE vu que le code ne contient pas de js. Du coup, le "hover" sur autre chose que le "a" n'est pas pris en compte.

C'est pas bien grave les personnes naviguant sous IE ont quand même accès à un menu parlant.
Je vais me contenter de ça pour l'instant puis plus tard je pourrais m'y repencher dessus.
Merci de ton aide en tout cas