[HOVER] Menu-déroulant non fonctionnel [Résolu/Fermé]

Signaler
Messages postés
388
Date d'inscription
dimanche 28 décembre 2008
Statut
Membre
Dernière intervention
20 janvier 2019
-
kab51
Messages postés
388
Date d'inscription
dimanche 28 décembre 2008
Statut
Membre
Dernière intervention
20 janvier 2019
-
Bonjour,

J'éssaye de faire un menu déroulant qui me paraissait simple en suivant un tutoriel.
Problème : La fonction hover ne semble pas foinctionner. voici mes codes HTML et CSS.

<div>
        <ul id="menu">
			<li><a href="#">MENU1</a></li>
			<li><a href="#">MENU2</a></li>
				<ul>
					<li><a href="#">lien sous menu 1</a></li>
					<li><a href="#">lien sous menu 2</a></li>
					<li><a href="#">lien sous menu 3</a></li>
					<li><a href="#">lien sous menu 4</a></li>
				</ul>
            <li><a href="#">MENU3</a></li>
				<ul>
					<li><a href="#">lien sous menu 1</a></li>
					<li><a href="#">lien sous menu 2</a></li>
					<li><a href="#">lien sous menu 3</a></li>
					<li><a href="#">lien sous menu 4</a></li>
				</ul>
            <li><a href="#">MENU4</a></li>
            <li><a href="#">MENU5</a></li>
            <li><a href="#">MENU6</a></li>
        </ul>
    </div>


#menu, #menu ul
{
padding: 0;
margin: 0;
list-style: none;
}

#menu
{
text-align:center;
}

#menu li
{
display:inline-block;
}

#menu ul li
{
display:inherit;
}

#menu a 
{
text-decoration: none;
display: block;
color:#000;
}

#menu ul
{
position:absolute;
left:-999em;
text-align:left;
}

#menu li:hover ul
{
left:auto
}



Merci pour votre aide, ça fait depuis le début d'après-midi que je suis dessus, je commence à désespérer :P.

Cordialement,
Kab51

7 réponses

Messages postés
717
Date d'inscription
dimanche 7 octobre 2007
Statut
Membre
Dernière intervention
19 juillet 2018
116
en effet ya un probleme :)

#menu li:hover ul
{
left:auto
}


ça c'est pas bon dutout


ça devrait aller mieux:

le html:

<nav>
<ul>
<li>
<a href="#">MENU1</a>
</li>
<li class="menu2">
<a href="#">MENU2</a>
<ul class="ssmenu2">
<li><a href="#">lien sous menu 1</a></li>
<li><a href="#">lien sous menu 2</a></li>
<li><a href="#">lien sous menu 3</a></li>
<li><a href="#">lien sous menu 4</a></li>
</ul>
</li>
<li class="menu3">
<a href="#">MENU3</a>
<ul class="ssmenu3">
<li><a href="#">lien sous menu 1</a></li>
<li><a href="#">lien sous menu 2</a></li>
<li><a href="#">lien sous menu 3</a></li>
<li><a href="#">lien sous menu 4</a></li>
</ul>
</li>
<li><a href="#">MENU4</a></li>
<li><a href="#">MENU5</a></li>
<li><a href="#">MENU6</a></li>
</ul>
</nav>



le css:


nav, nav ul
{
padding: 0;
margin: 0;
list-style-type: none;
}

nav
{
text-align:center;
}

nav li
{
display:inline-block;
}

nav a
{
text-decoration: none;
color:#000;
}

ul ul {
display:none;}

.menu2:hover ul.ssmenu2, .menu3:hover ul.ssmenu3 {
display:block;
position:absolute;
}

.ssmenu2 li, .ssmenu3 li {
display:block;
}
1
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 72424 internautes nous ont dit merci ce mois-ci

Thetower
Messages postés
717
Date d'inscription
dimanche 7 octobre 2007
Statut
Membre
Dernière intervention
19 juillet 2018
116
j'ai enlever le div inutile, maintenant pour la navigation si possible on utilise la balise nav

pour le code html ATTENTION : UL LI /Li UL /UL /UL n'est pas correct
un UL ne peut pas suivre directement un autre UL
il faut, pour avoir deux un UL dans un autre UL mettre celui ci dans un LI

UL LI UL /UL /LI /UL est juste

le code css beaucoup de trucs pour rien

on peut toujours faire mieux je vous donne un exemple correct et fonctionnel

je vous laisse le soin de regarder tout ça pour comprendre les erreurs commises
kab51
Messages postés
388
Date d'inscription
dimanche 28 décembre 2008
Statut
Membre
Dernière intervention
20 janvier 2019
74
Merci pour cette réponse qui a beaucoup avancé les choses :D !

J'aurais dû commencer par la, mais voila le tuto que j'ai suivi pour en arriver la : http://www.frogweb.fr/menu-deroulant-horizontal/

Le seul souci qu'il me reste, c'est que le menu est horizontal.
Les titres des sous menus s'affichent encore aux cotés des menus principaux, et une fois la souris passée sur les menus sensés déclencher l'apparition des sous menus, ces derniers s'affichent par dessus les menus.

Je ne sais pas si j'ai été très clair, mais en tout cas un énorme merci pour l'aide :) !


<nav> 
<ul id="menu"> 
<li> 
<a href="#">MENU1</a> 
</li> 
<li class="menu2"> 
<a href="#">MENU2</a> 
<ul class="ssmenu2"> 
<li><a href="#">lien sous menu 1</a></li> 
<li><a href="#">lien sous menu 2</a></li> 
<li><a href="#">lien sous menu 3</a></li> 
<li><a href="#">lien sous menu 4</a></li> 
</ul> 
</li> 
<li class="menu3"> 
<a href="#">MENU3</a> 
<ul class="ssmenu3"> 
<li><a href="#">lien sous menu 1</a></li> 
<li><a href="#">lien sous menu 2</a></li> 
<li><a href="#">lien sous menu 3</a></li> 
<li><a href="#">lien sous menu 4</a></li> 
</ul> 
</li> 
<li><a href="#">MENU4</a></li> 
<li><a href="#">MENU5</a></li> 
<li><a href="#">MENU6</a></li> 
</ul> 
</nav> 


#menu
{
display:block;
float:left;
clear:both;
width:960px;
height:54px;
float:left;
clear:both;
}

nav, nav ul 
{ 
padding: 0; 
margin: 0; 
list-style-type: none; 
} 

nav 
{ 
text-align:center; 
} 

nav li 
{ 
display:inline-block; 
} 

nav a 
{ 
text-decoration: none; 
color:#000; 
}  

.menu2:hover ul.ssmenu2, .menu3:hover ul.ssmenu3 { 
display:block; 
position:absolute; 
} 

.ssmenu2 li, .ssmenu3 li { 
display:block; 
} 


Cordialement,
Kab51
Messages postés
717
Date d'inscription
dimanche 7 octobre 2007
Statut
Membre
Dernière intervention
19 juillet 2018
116
non non moi ça marche tres bien pas de sous menu affichés sur les menus

attention le html doit commencer par:

<!doctype html>

pour annoncer au navigateur qu'il s'agit de html5 et non pas autre chose
Messages postés
717
Date d'inscription
dimanche 7 octobre 2007
Statut
Membre
Dernière intervention
19 juillet 2018
116
dites moi si ça ne marche toujours pas
Messages postés
717
Date d'inscription
dimanche 7 octobre 2007
Statut
Membre
Dernière intervention
19 juillet 2018
116
ah non!!! pardon
vous avez touché au css
ya des erreurs je jete un oeil 1sec
Messages postés
717
Date d'inscription
dimanche 7 octobre 2007
Statut
Membre
Dernière intervention
19 juillet 2018
116
NOOOOOONNNNN vous avez bousillé mon css :'(

svp, prenez mon css et modifier le pour l'apparence si vous voulez mais ne repartez pas du votre :)

mais je jete un oeil quand meme :)
kab51
Messages postés
388
Date d'inscription
dimanche 28 décembre 2008
Statut
Membre
Dernière intervention
20 janvier 2019
74
J'ai repris ça, ça m'a l'air de fonctionner, je tente d'intégrèr la police voulue et je reviens donner des nouvelles :)
Messages postés
717
Date d'inscription
dimanche 7 octobre 2007
Statut
Membre
Dernière intervention
19 juillet 2018
116
<!DOCTYPE html>
<html lang="fr">
<head>
<title>test</title>
<link rel="stylesheet" href="css.css" type="text/css" media="all">
</head>
<body>
<nav id="menu">
<ul>
<li>
<a href="#">MENU1</a>
</li>
<li class="menu2">
<a href="#">MENU2</a>
<ul class="ssmenu2">
<li><a href="#">lien sous menu 1</a></li>
<li><a href="#">lien sous menu 2</a></li>
<li><a href="#">lien sous menu 3</a></li>
<li><a href="#">lien sous menu 4</a></li>
</ul>
</li>
<li class="menu3">
<a href="#">MENU3</a>
<ul class="ssmenu3">
<li><a href="#">lien sous menu 1</a></li>
<li><a href="#">lien sous menu 2</a></li>
<li><a href="#">lien sous menu 3</a></li>
<li><a href="#">lien sous menu 4</a></li>
</ul>
</li>
<li><a href="#">MENU4</a></li>
<li><a href="#">MENU5</a></li>
<li><a href="#">MENU6</a></li>
</ul>
</nav>
</body>
</html>


#menu
{
float:left;
width:960px;
height:54px;
}

nav, nav ul
{
padding: 0;
margin: 0;
list-style-type: none;
}

nav
{
text-align:center;
}

nav li
{
display:inline-block;
}

nav a
{
text-decoration: none;
color:#000;
}
ul ul {
display:none;}

.menu2:hover ul.ssmenu2, .menu3:hover ul.ssmenu3 {
display:block;
position:absolute;
}

.ssmenu2 li, .ssmenu3 li {
display:block;
}
Messages postés
717
Date d'inscription
dimanche 7 octobre 2007
Statut
Membre
Dernière intervention
19 juillet 2018
116
j'ai laissé un header de test, au cas où

la ça marche bien mais c'est moins propre, y'a du css inutile etc...

repartez de mon html et css d'avant sinon

pourquoi tenez vous tant à l'ID menu inutile?