Mon sous menu disparait

gaya_102 -  
Bonjour,
bonjour
voila mon menu est fait avec du texte et pas des images. Du coup quand la souris n'est plus sur du texte le sous menu disparait. Ce qui est normal. Je voudrais trouvé une solution pour éviter cela.

http://www.lemondedegaya.fr/mariage.php 

/**********************************************************
				STYLES GENERAUX
**********************************************************/
 
img { 
	border: 0; 
	display: block; 
}
 
#logo { 
	float: left;
}
 
 
/***********************************************************
					MENU HORIZONTAL
**********************************************************/
 
#menuHorizon {
	margin-left: 90px;
	padding: 0;
	margin: 0;

}
 
#menuHorizon li {
	position: relative;
	float: left; /* mes les boutons sur la gauche*/
	list-style: none;

	font-family:Comic Sans MS, Times New Roman, Times, serif;
	text-decoration: none;
}
 
 
#menuHorizon li a { /* sous menu of*/
	display: block;
	line-height: 22px;/* hauteur de chaques boutons des sous menus*/
	text-decoration: none;
font-size: 17px;
	color: #b04cbf;/* couleur de la police*/
	width:100%;
}
 
#menuHorizon li a:hover{ /* sous menu on*/
	background-color: #f8d8fc;/* couleur du fond du sous menu en on*/
	color: purple; /* couleur de la police sous menu en on*/
	font-size: 17px;
} 
 
#menuHorizon li ul {
	position: absolute;
	top: 28px;
	display: none;
	left: 0; /* deplace les sous menu vers la droite*/
	padding: 0;/* marge a l'interieur des sous menus vers les bord*/
	margin: 0;
	border: 1px solid #000;
	background: #fff; /* indiqueras une couleur de fond blanche */
font-size: 15px;
}
 
#menuHorizon li:hover > ul {
	display: block;
}
 
#menuHorizon li ul li {
	float: none;
	width: 170;/* largeur des sous menu*/
	border:0px solid #000; /* créeras une bordure noir de 1 px tout autour de chaque lien */

}
 

 
#menuHorizon li ul li a {
width:158px;
	padding: 0 5px; /* hauteur et largeur de l'ensemble de sous menu*/
	border:1px solid #000; /* créeras une bordure noir de 1 px tout autour de chaque lien */

}


<div id="second">
    <ul id="menuHorizon">
          <li class="deroulant" style="width:110px"><a href="mariage.php">Acceuil</a>            
            </li>
 
        	  <li><img src="images/fleur_menu_page.jpg" alt="images/fleur_menu_page.jpg"/></li>
     
          <li class="deroulant" style="width:110px"><a href="mariage.php">mariage</a>            
              <ul>
            	  <li><a href="prestataires.php">La collection</a></li>
            	  <li><a href="deroulement.php">Les différents formats</a></li>
            	  <li><a href="voyage.php">Les différents papier</a></li>
            	 
             </ul>
            </li>
    
        	  <li><img src="images/fleur_menu_page.jpg" alt="images/fleur_menu_page.jpg"/></li>
     
     
          <li class="deroulant" style="width:110px"><a href="mariage.php">Naissance</a>            
                <ul>
              	  <li><a href="prestataires.php">La collection</a></li>
            	  <li><a href="deroulement.php">Les différents formats</a></li>
            	  <li><a href="voyage.php">Les différents papier</a></li>
        	  
               </ul>
            </li>
        	  <li><img src="images/fleur_menu_page.jpg" alt="images/fleur_menu_page.jpg"/></li>
 
          <li class="deroulant" style="width:130px"><a href="mariage.php">Témoignages</a>            
            
          </li>
        	  <li><img src="images/fleur_menu_page.jpg" alt="images/fleur_menu_page.jpg"/></li>
     
		   
			   <li class="deroulant" style="width:110px"><a href="mariage.php">Contact</a>            
                
	 
	 
	 
    </div>


merci d'avance
Configuration: Windows XP
Firefox 3.0.13

26 réponses

  • Votes
  • Date
  • Date décroissante
Résumé de la discussion

Un menu horizontal composé de texte, sans images, voit ses sous-menus disparaître lorsque la souris n'est plus sur le lien. Des solutions proposées tournent autour de faire apparaître les sous-menus au survol via CSS et d'ajuster les largeurs et les flottants. Certaines réponses suggèrent d'utiliser display: block sur les menus déroulants et de remplacer des règles hover par des alternatives, tandis que d'autres évoquent un éventuel script (aff/fermer) pour contrôler l'affichage. En parallèle, des échanges portent aussi sur le positionnement des éléments et sur l'impact du float, avec des essais pour revenir au code CSS d'origine et adapter ensuite le comportement.

Bobot (l’IA à votre service)
  1. le hollandais volant
    Salut!

    Le :hover, tu dois le mettre sur le "li" pas sur le "a"
    1. gaya_102
      ca marche pas

      tous mes titre sont en dessous les uns des autres avec un point devant
      2. gaya_102
        du coup j'ai tout mon menu inversé

        http://www.lemondedegaya.fr/mariage2.php
        3. gaya_102
          je ne dois pas faire se qu'il faut 

          /**********************************************************
				STYLES GENERAUX
**********************************************************/
 
img { 
	border: 0; 
	display: block; 
}
 
#logo { 
	float: left;
}
 
 
/***********************************************************
					MENU HORIZONTAL
**********************************************************/
 
#menuHorizon {
	margin-left: 90px;
	padding: 0;
	margin: 0;

}
 
#menuHorizon li :hover{
	position: relative;
	float: left;/* mes les boutons sur la gauche*/
list-style-type: none;
	font-family:Comic Sans MS, Times New Roman, Times, serif;
	text-decoration: none;
}
 
 
#menuHorizon li a { /* sous menu of*/
	display: block;
	line-height: 22px;/* hauteur de chaques boutons des sous menus*/
	text-decoration: none;
font-size: 17px;
	color: #b04cbf;/* couleur de la police*/
	width:100%;
}
 
#menuHorizon li a{ /* sous menu on*/
	background-color: #f8d8fc;/* couleur du fond du sous menu en on*/
	color: purple; /* couleur de la police sous menu en on*/
	font-size: 17px;
} 
 
#menuHorizon li ul {
	position: absolute;
	top: 28px;
	display: none;
	left: 0; /* deplace les sous menu vers la droite*/
	padding: 0;/* marge a l'interieur des sous menus vers les bord*/
	margin: 0;
	border: 1px solid #000;
	background: #fff; /* indiqueras une couleur de fond blanche */
font-size: 15px;
}
 
#menuHorizon li:hover > ul {
	display: block;
}
 
#menuHorizon li ul li {
	float: none;
	width: 170;/* largeur des sous menu*/
	border:0px solid #000; /* créeras une bordure noir de 1 px tout autour de chaque lien */

}
 

 
#menuHorizon li ul li a {
width:158px;
	padding: 0 5px; /* hauteur et largeur de l'ensemble de sous menu*/
	border:1px solid #000; /* créeras une bordure noir de 1 px tout autour de chaque lien */

}
          1. vincent170186
            salut .... alors un petit script....

            en haut de ta page dans les balise head met

            <script type='text/javascript'>
            function aff (val)
            {if (val=='1')
            {document.getElementById('soumen1').style.display='inline';
            document.getElementById('soumen2').style.display='none';
            }
            else if (val=='2')
            {document.getElementById('soumen1').style.display='none';
            document.getElementById('soumen2').style.display='inline';
            }

            }

            function fermer()
            {document.getElementById('soumen1').style.display='none';
            document.getElementById('soumen2').style.display='none';
            }
            </script>

            puis remplace le code que tu a mis ci dessus par

            <div id="second">
            <ul id="menuHorizon" >
            <li class="deroulant" onMouseOver='fermer()' style="width:110px" ><a href="mariage.php">Acceuil</a>
            </li>

            <li><img src="images/fleur_menu_page.jpg" alt="images/fleur_menu_page.jpg"/></li>

            <li class="deroulant" onMouseOver='fermer()' style="width:110px" onMouseOver='aff (1)'><a href="mariage.php">mariage</a>
            <ul id="soumen1">
            <li><a href="prestataires.php">La collection</a></li>
            <li><a href="deroulement.php">Les différents formats</a></li>
            <li><a href="voyage.php">Les différents papier</a></li>

            </ul>
            </li>

            <li><img src="images/fleur_menu_page.jpg" alt="images/fleur_menu_page.jpg"/></li>

            <li class="deroulant" onMouseOver='fermer()' style="width:110px" onMouseOver='aff (2)'><a href="mariage.php">Naissance</a>
            <ul id="soumen2">
            <li ><a href="prestataires.php">La collection</a></li>
            <li><a href="deroulement.php">Les différents formats</a></li>
            <li><a href="voyage.php">Les différents papier</a></li>

            </ul>
            </li>
            <li><img src="images/fleur_menu_page.jpg" alt="images/fleur_menu_page.jpg"/></li>

            <li class="deroulant" onMouseOver='fermer()' style="width:130px"><a href="mariage.php">Témoignages</a>

            </li>
            <li><img src="images/fleur_menu_page.jpg" alt="images/fleur_menu_page.jpg"/></li>

            <li class="deroulant" onMouseOver='fermer()' style="width:110px"><a href="mariage.php">Contact</a>

            </div>

            ---un simple copier coller des deux devrait suffir voila... di moi si ça marche....
            1. gaya_102
              En fat je n'ai pas de <head> etant donné que je ne met que mon menu dans cette page
              1. vincent170186
                c'est pas grave met le dans le body c'est pareil.....

                cela dit en passant tu a un <head> vu que ta page a un titre....
                donc tu a une balise <title>le monde de gaya et ses faire part</title>
                est elle est situé dans head....
            2. le hollandais volant
              Je pense qu'elle utilise PHP pour inclure un ficheir text uniquement avec le code du menu :-)

              Dans ce cas, le scripte, faut le mettre dans le Head dans la page mariage.php

              (j'avais raison : voici le menu tout seul : http://www.lemondedegaya.fr/menu.php )
              1. vincent170186
                ha oui .... pas con.... j'i avais pas penser....
                dsl
            3. gaya_102
              oui oui voila c'est ce que je viens de faire
              alors ca marche mais le sous menu a des problèmes
              lol

              http://www.lemondedegaya.fr/mariage2.php
              2. gaya_102
                je fais comme tu dit et regarde se que ca fais

                http://www.lemondedegaya.fr/mariage2.php 

                /**********************************************************
				STYLES GENERAUX
**********************************************************/
 
img { 
	border: 0; 
	display: block; 
}
 
#logo { 
	float: left;
}
 
 
/***********************************************************
					MENU HORIZONTAL
**********************************************************/
 
#menuHorizon {
	margin-left: 90px;
	padding: 0;
	margin: 0;

}
 
#menuHorizon li :hover{
	position: relative;
	float: left;/* mes les boutons sur la gauche*/
list-style-type: none;
	font-family:Comic Sans MS, Times New Roman, Times, serif;
	text-decoration: none;
}
 
 
#menuHorizon li a { /* sous menu of*/
	display: block;
	line-height: 22px;/* hauteur de chaques boutons des sous menus*/
	text-decoration: none;
font-size: 17px;
	color: #b04cbf;/* couleur de la police*/
	width:100%;
}
 
#menuHorizon li a{ /* sous menu on*/
	background-color: #f8d8fc;/* couleur du fond du sous menu en on*/
	color: purple; /* couleur de la police sous menu en on*/
	font-size: 17px;
} 
 
#menuHorizon li ul {
	position: absolute;
	top: 28px;
	display: none;
	left: 0; /* deplace les sous menu vers la droite*/
	padding: 0;/* marge a l'interieur des sous menus vers les bord*/
	margin: 0;
	border: 1px solid #000;
	background: #fff; /* indiqueras une couleur de fond blanche */
font-size: 15px;
}
 
#menuHorizon li:hover > ul {
	display: block;
}
 
#menuHorizon li ul li {
	float: none;
	width: 170;/* largeur des sous menu*/
	border:0px solid #000; /* créeras une bordure noir de 1 px tout autour de chaque lien */

}
 

 
#menuHorizon li ul li a {
width:158px;
	padding: 0 5px; /* hauteur et largeur de l'ensemble de sous menu*/
	border:1px solid #000; /* créeras une bordure noir de 1 px tout autour de chaque lien */

}
                1. vincent170186
                  autant pour moi....

                  voila le bon (enfin j'espére....)
                  <script type='text/javascript'>
                  function aff (val)
                  {if (val=='1')
                  {document.getElementById('soumen1').style.display='block';
                  document.getElementById('soumen2').style.display='none';
                  }
                  else if (val=='2')
                  {document.getElementById('soumen1').style.display='none';
                  document.getElementById('soumen2').style.display='block';
                  }

                  }

                  function fermer()
                  {document.getElementById('soumen1').style.display='none';
                  document.getElementById('soumen2').style.display='none';
                  }
                  </script>

                  et oui block au lieu de inline.....
                  1. le hollandais volant
                    Tentes voir ceci : 

                    #menuHorizon {
    list-style-type: none;
    text-align: center;
    position: absolute;
    color: purple;
    }
#menuHorizon ul {
    list-style-type: none;
    text-align: left;
    background-color: #fff;
    display: block;
    width: 170px;
    }
#menuHorizon > li {
    float: left;
    width: 80px;
    border: 1px black solid;
    margin: 1px;
    height: 22px;
    overflow: hidden;
    background-color: #faa;
    }
#menuHorizon > li:hover {
    height: auto;
    }


                    sinon, le mieux est de tout recommencer depuis le début. En fessant tout par étape.
                    1. gaya_102
                      snif mon menu a disparut

                      /**********************************************************
                      STYLES GENERAUX
                      **********************************************************/

                      img {
                      border: 0;
                      display: block;
                      }

                      #logo {
                      float: left;
                      }

                      /***********************************************************
                      MENU HORIZONTAL
                      **********************************************************/

                      #menuHorizon {
                      list-style-type: none;
                      text-align: center;
                      position: absolute;
                      color: purple;
                      }
                      #menuHorizon ul {
                      list-style-type: none;
                      text-align: left;
                      background-color: #fff;
                      display: block;
                      width: 170px;
                      }
                      #menuHorizon > li {
                      float: left;
                      width: 80px;
                      border: 1px black solid;
                      margin: 1px;
                      height: 22px;
                      overflow: hidden;
                      background-color: #faa;
                      }
                      #menuHorizon > li:hover {
                      height: auto;
                      }
                      #menuHorizon li :hover{
                      position: relative;
                      float: left;/* mes les boutons sur la gauche*/
                      list-style-type: none;
                      font-family:Comic Sans MS, Times New Roman, Times, serif;
                      text-decoration: none;
                      }

                      #menuHorizon li a { /* sous menu of*/
                      display: block;
                      line-height: 22px;/* hauteur de chaques boutons des sous menus*/
                      text-decoration: none;
                      font-size: 17px;
                      color: #b04cbf;/* couleur de la police*/
                      width:100%;
                      }

                      #menuHorizon li a{ /* sous menu on*/
                      background-color: #f8d8fc;/* couleur du fond du sous menu en on*/
                      color: purple; /* couleur de la police sous menu en on*/
                      font-size: 17px;
                      }

                      #menuHorizon li ul {
                      position: absolute;
                      top: 28px;
                      display: none;
                      left: 0; /* deplace les sous menu vers la droite*/
                      padding: 0;/* marge a l'interieur des sous menus vers les bord*/
                      margin: 0;
                      border: 1px solid #000;
                      background: #fff; /* indiqueras une couleur de fond blanche */
                      font-size: 15px;
                      }

                      #menuHorizon li:hover > ul {
                      display: block;
                      }

                      #menuHorizon li ul li {
                      float: none;
                      width: 170;/* largeur des sous menu*/
                      border:0px solid #000; /* créeras une bordure noir de 1 px tout autour de chaque lien */

                      }

                      #menuHorizon li ul li a {
                      width:158px;
                      padding: 0 5px; /* hauteur et largeur de l'ensemble de sous menu*/
                      border:1px solid #000; /* créeras une bordure noir de 1 px tout autour de chaque lien */

                      }
                      1. vincent170186
                        remet ton code css d'origine et met juste le script que je t'ai filé....avecle display block ça doit marcher (logiquement le javascript l'emporte sur le css....enfin c'est caricatura lce que je vien de dire mais en gros c'est ça....)
                        2. vincent170186
                          oui je vois ça....mais sit uvas vite il reste apparent... mais bon

                          dans ton css enleve le

                          #menuHorizon li :hover{
                          position: relative;
                          float: left;/* mes les boutons sur la gauche*/
                          list-style-type: none;
                          font-family:Comic Sans MS, Times New Roman, Times, serif;
                          text-decoration: none;
                          }

                          et remplace le par

                          #menuHorizon li {
                          position: relative;
                          float: left;/* mes les boutons sur la gauche*/
                          list-style-type: none;
                          font-family:Comic Sans MS, Times New Roman, Times, serif;
                          text-decoration: none;
                          }

                          aller ça vient bon
                          1. gaya_102
                            je me demande si on parle de la meme page

                            http://www.lemondedegaya.fr/mariage2.php

                            /**********************************************************
                            STYLES GENERAUX
                            **********************************************************/

                            img {
                            border: 0;
                            display: block;
                            }

                            #logo {
                            float: left;
                            }

                            /***********************************************************
                            MENU HORIZONTAL
                            **********************************************************/

                            #menuHorizon {
                            margin-left: 90px;
                            padding: 0;
                            margin: 0;

                            }

                            #menuHorizon li {
                            position: relative;
                            float: left; /* mes les boutons sur la gauche*/
                            list-style: none;

                            font-family:Comic Sans MS, Times New Roman, Times, serif;
                            text-decoration: none;
                            }

                            #menuHorizon li a { /* sous menu of*/
                            display: block;
                            line-height: 22px;/* hauteur de chaques boutons des sous menus*/
                            text-decoration: none;
                            font-size: 17px;
                            color: #b04cbf;/* couleur de la police*/
                            width:100%;
                            }

                            #menuHorizon li a:hover{ /* sous menu on*/
                            background-color: #f8d8fc;/* couleur du fond du sous menu en on*/
                            color: purple; /* couleur de la police sous menu en on*/
                            font-size: 17px;
                            }

                            #menuHorizon li ul {
                            position: absolute;
                            top: 28px;
                            display: none;
                            left: 0; /* deplace les sous menu vers la droite*/
                            padding: 0;/* marge a l'interieur des sous menus vers les bord*/
                            margin: 0;
                            border: 1px solid #000;
                            background: #fff; /* indiqueras une couleur de fond blanche */
                            font-size: 15px;
                            }

                            #menuHorizon li:hover > ul {
                            display: block;
                            }

                            #menuHorizon li ul li {
                            float: none;
                            width: 170;/* largeur des sous menu*/
                            border:0px solid #000; /* créeras une bordure noir de 1 px tout autour de chaque lien */

                            }

                            #menuHorizon li ul li a {
                            width:158px;
                            padding: 0 5px; /* hauteur et largeur de l'ensemble de sous menu*/
                            border:1px solid #000; /* créeras une bordure noir de 1 px tout autour de chaque lien */

                            }

                            car je n'ai pas du tout se que tu me dit ou alors je ne le vois pas snif
                            1. vincent170186
                              ok ok ...

                              bon alors deja enleve

                              #menuHorizon li:hover > ul {
                              display: block;
                              }

                              et regarde ce que ça donne ... (ach , le CSS ... j'aime pas ça....)

                              • 1
                              • 2

                              Discussions similaires

                              Comment faire afin d'accéder au boot menu ou BIOS sous MSI ?
                              Kaheil

                              7 réponses
                              Comment activer le Bluetooth sur une TV Samsung ?
                              zaraki490

                              110 réponses
                              Mon PC marque press the esc key for startup menu
                              Jonas2022

                              5 réponses
                              Restauration iPhone : la pomme s'allume puis s'éteint
                              coapo

                              8 réponses
                              Activer le bluetooth sur smart TV Samsung
                              Odayakana

                              4 réponses