mon sous menu disparait

Question

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 */ }

merci d'avance

le hollandais volant · Answer

Salut!

Le :hover, tu dois le mettre sur le "li" pas sur le "a"

gaya_102 · Answer

ca marche pas

tous mes titre sont en dessous les uns des autres avec un point devant

le hollandais volant · Answer

En css, faut mettre pour les LI : 

float: right;

et list-style-type: none;

un exmeple
un tuto

gaya_102 · Answer

du coup j'ai tout mon menu inversé

http://www.lemondedegaya.fr/mariage2.php

le hollandais volant · Answer

Pardon…

remplace le 
float: right;  par un float:left.

gaya_102 · Answer

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 */

}

vincent170186 · Answer

salut .... alors un petit script.... en haut de ta page dans les balise head met puis remplace le code que tu a mis ci dessus par

---un simple copier coller des deux devrait suffir voila... di moi si ça marche....

gaya_102 · Answer

En fat je n'ai pas de <head> etant donné que je ne met que mon menu dans cette page

le hollandais volant · Answer

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 )

gaya_102 · Answer

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

le hollandais volant · Answer

Oui, mais le Hover est encore sur le <a>

gaya_102 · Answer

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 */

}

vincent170186 · Answer

autant pour moi.... voila le bon (enfin j'espére....) et oui block au lieu de inline.....

le hollandais volant · Answer

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.

gaya_102 · Answer

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 */

}

vincent170186 · Answer

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....)

gaya_102 · Answer

j'ai tout remis mais mon sous menu disparait

vincent170186 · Answer

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

gaya_102 · Answer

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

vincent170186 · Answer

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....)

gaya_102 · Answer

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 */

}

vincent170186 · Answer

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 :

allez on y croit....

gaya_102 · Answer

snif plus de sous menu 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; 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 */ }

vincent170186 · Answer

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...

gaya_102 · Answer

merci de ton aide en tout cas
moi aussi je dois partir mais moi c'est au boulot lol

vincent170186 · Answer

alors bon courage..... a la revoyure...

Mon sous menu disparait - Page 2

Discussions similaires

Newsletters