Sujet Précédent Sujet Suivant

[HOVER] Menu-déroulant non fonctionnel

Résolu/Fermé
kab51 Messages postés 378 Date d'inscription dimanche 28 décembre 2008 Statut Membre Dernière intervention 12 juin 2022 - 11 déc. 2014 à 22:58
kab51 Messages postés 378 Date d'inscription dimanche 28 décembre 2008 Statut Membre Dernière intervention 12 juin 2022 - 12 déc. 2014 à 00:41
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 dimanche 7 octobre 2007 Statut Membre Dernière intervention 6 février 2024 148
11 déc. 2014 à 23:25
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 dimanche 7 octobre 2007 Statut Membre Dernière intervention 6 février 2024 148
11 déc. 2014 à 23:29
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 dimanche 28 décembre 2008 Statut Membre Dernière intervention 12 juin 2022 89
12 déc. 2014 à 00:26
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 dimanche 7 octobre 2007 Statut Membre Dernière intervention 6 février 2024 148
12 déc. 2014 à 00:30
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 dimanche 7 octobre 2007 Statut Membre Dernière intervention 6 février 2024 148
12 déc. 2014 à 00:30
dites moi si ça ne marche toujours pas
0
Réponse 4 / 7
Thetower Messages postés 717 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 6 février 2024 148
12 déc. 2014 à 00:31
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 dimanche 7 octobre 2007 Statut Membre Dernière intervention 6 février 2024 148
12 déc. 2014 à 00:33
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 dimanche 28 décembre 2008 Statut Membre Dernière intervention 12 juin 2022 89
12 déc. 2014 à 00:41
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 dimanche 7 octobre 2007 Statut Membre Dernière intervention 6 février 2024 148
12 déc. 2014 à 00:39 
<!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 dimanche 7 octobre 2007 Statut Membre Dernière intervention 6 février 2024 148
12 déc. 2014 à 00:40
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
les entrées et les sortées
oussman -
MarsuGL -

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

8 réponses
mon ordi marque press the esc key for startup menu
jasonparris -
elow -

5 réponses