Mon sous menu disparait

Fermé
gaya_102 - 28 août 2009 à 14:18
vincent170186 Messages postés 316 Date d'inscription mardi 17 mars 2009 Statut Membre Dernière intervention 28 septembre 2012 - 28 août 2009 à 16:26
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
A voir également:

26 réponses

plus de sous menu

/**********************************************************
				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 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
vincent170186 Messages postés 316 Date d'inscription mardi 17 mars 2009 Statut Membre Dernière intervention 28 septembre 2012 52
28 août 2009 à 16:08
dans:

#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;
}

enleve :
display: none;

ce qui donne :

#menuHorizon li ul {
position: absolute;
top: 28px;
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;
}

et le code html donneras :

<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" style="display:none">
<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" style="display:none">
<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>

allez on y croit....

0
snif plus de sous menu

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

<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" style="display:none">
<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" style="display:none">
<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> 


/**********************************************************
				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;
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 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
vincent170186 Messages postés 316 Date d'inscription mardi 17 mars 2009 Statut Membre Dernière intervention 28 septembre 2012 52
28 août 2009 à 16:22
bon ben ecoute désolé je vois pas et la je vais partir (horaire de fonctionnaire...) donc si une bonne ames veux s'occuper de toi....(un conseil reposte un mess....)
voila...
0

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

Posez votre question
merci de ton aide en tout cas
moi aussi je dois partir mais moi c'est au boulot lol
0
vincent170186 Messages postés 316 Date d'inscription mardi 17 mars 2009 Statut Membre Dernière intervention 28 septembre 2012 52
28 août 2009 à 16:26
alors bon courage..... a la revoyure...
0