[HOVER] Menu-déroulant non fonctionnel

Résolu
kab51 Messages postés 378 Date d'inscription   Statut Membre Dernière intervention   -  
kab51 Messages postés 378 Date d'inscription   Statut Membre Dernière intervention   -
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
A voir également:

7 réponses

Réponse 1 / 7
Thetower Messages postés 717 Date d'inscription   Statut Membre Dernière intervention   148
 
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
Thetower Messages postés 717 Date d'inscription   Statut Membre Dernière intervention   148
 
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
0
kab51 Messages postés 378 Date d'inscription   Statut Membre Dernière intervention   89
 
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
0
Réponse 2 / 7
Thetower Messages postés 717 Date d'inscription   Statut Membre Dernière intervention   148
 
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
0
Réponse 3 / 7
Thetower Messages postés 717 Date d'inscription   Statut Membre Dernière intervention   148
 
dites moi si ça ne marche toujours pas
0
Réponse 4 / 7
Thetower Messages postés 717 Date d'inscription   Statut Membre Dernière intervention   148
 
ah non!!! pardon
vous avez touché au css
ya des erreurs je jete un oeil 1sec
0

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

Posez votre question
Réponse 5 / 7
Thetower Messages postés 717 Date d'inscription   Statut Membre Dernière intervention   148
 
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 :)
0
kab51 Messages postés 378 Date d'inscription   Statut Membre Dernière intervention   89
 
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 :)
0
Réponse 6 / 7
Thetower Messages postés 717 Date d'inscription   Statut Membre Dernière intervention   148
  
<!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; 
}
0
Réponse 7 / 7
Thetower Messages postés 717 Date d'inscription   Statut Membre Dernière intervention   148
 
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?
0

Discussions similaires

Suppression listes déroulantes
Archa -
Sam -

5 réponses
Supprimer liste déroulante Excel
SamAlex -
b@bd -

8 réponses
Effacer liste déroulante
gabrielle -
jmps -

3 réponses
menu caché
laurent -
ChariduP -

7 réponses
supprimer une liste déroulante
fred94 -
m@rina -

3 réponses