Mon sous menu disparait

gaya_102 -  
vincent170186 Messages postés 329 Statut Membre -
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

  • 1
  • 2
  1. le hollandais volant Messages postés 5294 Statut Membre 1 059
     
    Salut!

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

    tous mes titre sont en dessous les uns des autres avec un point devant
    0
  3. le hollandais volant Messages postés 5294 Statut Membre 1 059
     
    En css, faut mettre pour les LI :

    float: right;

    et list-style-type: none;

    un exmeple
    un tuto
    0
  4. gaya_102
     
    du coup j'ai tout mon menu inversé

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

  5. Vous n’avez pas trouvé la réponse que vous recherchez ?

    Posez votre question
  6. le hollandais volant Messages postés 5294 Statut Membre 1 059
     
    Pardon…

    remplace le
    float: right; par un float:left.
    0
  7. 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 */

}
    0
  8. vincent170186 Messages postés 329 Statut Membre 52
     
    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....
    0
  9. gaya_102
     
    En fat je n'ai pas de <head> etant donné que je ne met que mon menu dans cette page
    0
    1. vincent170186 Messages postés 329 Statut Membre 52
       
      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....
      0
  10. le hollandais volant Messages postés 5294 Statut Membre 1 059
     
    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 )
    0
    1. vincent170186 Messages postés 329 Statut Membre 52
       
      ha oui .... pas con.... j'i avais pas penser....
      dsl
      0
  11. 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
    0
  12. le hollandais volant Messages postés 5294 Statut Membre 1 059
     
    Oui, mais le Hover est encore sur le <a>
    0
  13. 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 */

}
    0
  14. vincent170186 Messages postés 329 Statut Membre 52
     
    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.....
    0
  15. le hollandais volant Messages postés 5294 Statut Membre 1 059
     
    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.
    0
  16. 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 */

    }
    0
  17. vincent170186 Messages postés 329 Statut Membre 52
     
    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....)
    0
  18. gaya_102
     
    j'ai tout remis mais mon sous menu disparait
    0
  19. vincent170186 Messages postés 329 Statut Membre 52
     
    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
    0
  20. 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
    0
  21. vincent170186 Messages postés 329 Statut Membre 52
     
    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....)

    0
  • 1
  • 2

Discussions similaires

Comment activer le Bluetooth sur une TV Samsung ?
zaraki490 -
Marjo -

110 réponses
Comment faire afin d'accéder au boot menu ou BIOS sous MSI ?
Kaheil -
Ismo87 -

7 réponses
Mon PC marque press the esc key for startup menu
Jonas2022 -
SATS_fr -

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

8 réponses
menu caché
laurent -
ChariduP -

7 réponses