Sujet Précédent Sujet Suivant

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
A voir également:

26 réponses

  • 1
  • 2
Réponse 1 / 26
le hollandais volant Messages postés 5294 Statut Membre 1 058
 
Salut!

Le :hover, tu dois le mettre sur le "li" pas sur le "a"
0
Réponse 2 / 26
gaya_102
 
ca marche pas

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

float: right;

et list-style-type: none;

un exmeple
un tuto
0
Réponse 4 / 26
gaya_102
 
du coup j'ai tout mon menu inversé

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

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

Posez votre question
Réponse 5 / 26
le hollandais volant Messages postés 5294 Statut Membre 1 058
 
Pardon…

remplace le
float: right; par un float:left.
0
Réponse 6 / 26
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
Réponse 7 / 26
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
Réponse 8 / 26
gaya_102
 
En fat je n'ai pas de <head> etant donné que je ne met que mon menu dans cette page
0
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
Réponse 9 / 26
le hollandais volant Messages postés 5294 Statut Membre 1 058
 
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
vincent170186 Messages postés 329 Statut Membre 52
 
ha oui .... pas con.... j'i avais pas penser....
dsl
0
Réponse 10 / 26
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
Réponse 11 / 26
le hollandais volant Messages postés 5294 Statut Membre 1 058
 
Oui, mais le Hover est encore sur le <a>
0
Réponse 12 / 26
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
Réponse 13 / 26
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
Réponse 14 / 26
le hollandais volant Messages postés 5294 Statut Membre 1 058
 
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
Réponse 15 / 26
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
Réponse 16 / 26
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
Réponse 17 / 26
gaya_102
 
j'ai tout remis mais mon sous menu disparait
0
Réponse 18 / 26
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
Réponse 19 / 26
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
Réponse 20 / 26
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

Discussions similaires

Une demande d'ami qui disparaît ?
Elleame -
Elleame -

2 réponses
menu caché
laurent -
ChariduP -

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

5 réponses
Comment activer le Bluetooth sur une TV Samsung ?
zaraki490 -
Marjo -

110 réponses
Déblocage du mode hôtel Philips 20HF5234/10
Jo_3 -
TRAORE_2505 -

7 réponses