Bonjour,
J'aimerais lorsqu'on met le pointeur sur un menu, voir apparaître les sous-menus comme sur ce site quand on met le pointeur sur Actualités, s'affiche en dessous Découverte du jour, Internet, Jeux vidéos etc...
Je voudrais avoir les sous menus apparaître sous le menu verticalement.
Comment faire en HTML5 ? Faut-il passer par le CSS3 ?

Afficher la suite

7 réponses

Réponse 1 / 7
animostab Messages postés 3003 Date d'inscription Statut Membre Dernière intervention 738

Salut
Oui il faut passer par du css

voici un tuto assez simple
http://css.mammouthland.net/menu-horizontal-deroulant-en-css.php
0
Réponse 2 / 7
besten Messages postés 101 Statut Membre

Merci beaucoup.
0
Réponse 3 / 7
besten Messages postés 101 Statut Membre

Une dernière question. J'aimerais faire comme à l'image ci-dessous mettre mon pointeur sur un menu où je vois le sous menu, et dans un sous menu, voir le sous sous menu. Comment faire ?
http://servimg.com/index.php?noimg=1&lang=en&k=136
0
1. animostab Messages postés 3003 Date d'inscription Statut Membre Dernière intervention 738
  
  c'est la meme chose tu imbrique ul dans un li de sous menu
  
  puis ul li ul li ul {display:none;}
  puis ul li ul li:hover ul {display:block;} en plus tu positionne avec un margin-left
  
  0
Réponse 4 / 7
besten Messages postés 101 Statut Membre

J'ai essayé mais je n'y arrive pas, je ne vois pas où.
Dans le sous menu 1 par exemple, comment j'insère mon sous sous menu 1 ?
Qu'est-ce que je dois modifier dans mon CSS ?

<ul>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a>
<ul>
<li><a href="#">Sous Menu 1</a></li>
<li><a href="#">Sous Menu 2</a></li>
</ul>
</li>
</ul>
0
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Réponse 5 / 7
animostab Messages postés 3003 Date d'inscription Statut Membre Dernière intervention 738

<ul>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a>
<ul>
<li><a href="#">Sous Menu 1</a></li>
<li><a href="#">Sous Menu 2</a>
<ul>
<li><a href="#">Sous sous Menu 1</a></li>
</ul>
</li>
</ul>
</li>
</ul>

et avec le css que je t'ai donné avant (a adapter)
0
Réponse 6 / 7
besten Messages postés 101 Statut Membre

Je n'ai pas compris pour le CSS.
0
1. animostab Messages postés 3003 Date d'inscription Statut Membre Dernière intervention 738
  
  tu rajoute a celui déjà present
  
  #menu ul li ul li ul {
  display:none;
  }
  #menu ul li ul li:hover ul {
  display:block;
  position:absolute;
  margin-left:100px;
  }
  
  0
Réponse 7 / 7
besten Messages postés 101 Statut Membre

Je vous donne le code que j'utilise. Quand je l'essaie, le Sous sous menu 1 s'affiche en dessous des Sous menu A et Sous menu B mais il s'affiche aussi après le Sous menu 2, qui plus est avec un décalage. Comment y remédier ?

http://servimg.com/index.php?noimg=1&lang=en&k=136
http://servimg.com/index.php?noimg=1&lang=en&k=136

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<title>Mon site</title>
</head>
<body>
<header>
<div id="menu">
<ul>
<li>
<a href="#">Menu 1</a>
</li>
<li>
<a href="#">Menu 2</a>
<ul>
<li>
<a href="#">Sous menu 1</a>
</li>
<li>
<a href="#">Sous menu 2</a>
</li>
</ul>
</li>
<li>
<a href="#">Menu 3</a>
</li>
<li>
<a href="#">Menu 4</a>
<ul>
<li>
<a href="#">Sous menu A</a>
</li>
<li>
<a href="#">Sous menu A</a>
<ul>
<li>
<a href="#">Sous sous menu 1</a>
</li>
</ul>
</li>
</ul>
<li>
<a href="#">Menu 5</a>
</li>
</ul>
</div>
</header>
</body>
</html>

CSS

#menu ul {
margin:0;
padding:0;
list-style-type:none;
text-align:center;
}
#menu li {
float:left;
margin:auto;
padding:0;
background-color:black;
}
#menu li a {
display:block;
width:100px;
color:white;
text-decoration:none;
padding:5px;
}
#menu li a:hover {
color:#FFD700;
}
#menu ul li ul {
display:none;
}
#menu ul li:hover ul {
display:block;
}
#menu li:hover ul li {
float:none;
}
#menu li ul {
position:absolute;
}
#menu ul li ul li ul {
display:none;
}
#menu ul li ul li:hover ul {
display:block;
position:absolute;
margin-left:100px;
}
0
1. animostab Messages postés 3003 Date d'inscription Statut Membre Dernière intervention 738
  
  voila ton css modifié
  
  #menu ul {
  margin:0;
  padding:0;
  list-style-type:none;
  text-align:center;
  }
  #menu li {
  float:left;
  margin:auto;
  padding:0;
  background-color:black;
  }
  #menu li a {
  display:block;
  width:100px;
  color:white;
  text-decoration:none;
  padding:5px;
  font-size:12px;
  line-height:15px;
  }
  #menu li a:hover {
  color:#FFD700;
  }
  #menu ul li ul {
  display:none;
  }
  #menu ul li:hover ul {
  display:block;
  }
  #menu li:hover ul li {
  float:none;
  }
  #menu li ul {
  position:absolute;
  }
  #menu ul li ul li ul {
  display:none;
  }
  #menu ul li ul li ul li{
  display:none;
  }
  #menu ul li ul li:hover ul {
  display:block;
  position:absolute;
  margin:-25px 0 0 110px;
  }
  #menu ul li ul li:hover ul li{
  display:block;
  }
  
  sinon il serait bon d'apprendre le css pour comprendre
  
  0
2. besten Messages postés 101 Statut Membre
  
  J'apprends cher ami, j'apprends. Mais si je ne pose pas de questions, je ne pourrais pas avancer...
  
  0
3. animostab Messages postés 3003 Date d'inscription Statut Membre Dernière intervention 738
  
  ok tu peux mettre le sujet en resolu
  
  0
4. besten Messages postés 101 Statut Membre
  
  J'ai un petit problème avec le style. J'ai mis une bordure à chaque menu. Mais, comme dans l'exemple avec Menu 1 Menu 2, Sous menu 1 etc..., chacun se touche, ça créé entre chaque menu une double bordure sur les côtés, même chose avec les sous menu mais cette fois ci en haut et en bas.
  Est-ce que c'est possible de créer un bloc pour chaque menu ?
  
  0

Menu

7 réponses

Discussions similaires

Newsletters