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 ?

A voir également:

7 réponses

Réponse 1 / 7

animostab Messages postés 2829 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

Réponse 2 / 7

besten Messages postés 90 Date d'inscription Statut Membre Dernière intervention

Merci beaucoup.

Réponse 3 / 7

besten Messages postés 90 Date d'inscription Statut Membre Dernière intervention

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

animostab Messages postés 2829 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

Réponse 4 / 7

besten Messages postés 90 Date d'inscription Statut Membre Dernière intervention

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>

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

Posez votre question

Réponse 5 / 7

animostab Messages postés 2829 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)

Réponse 6 / 7

besten Messages postés 90 Date d'inscription Statut Membre Dernière intervention

Je n'ai pas compris pour le CSS.

animostab Messages postés 2829 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;
}

Réponse 7 / 7

besten Messages postés 90 Date d'inscription Statut Membre Dernière intervention

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;
}

animostab Messages postés 2829 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

besten Messages postés 90 Date d'inscription Statut Membre Dernière intervention

J'apprends cher ami, j'apprends. Mais si je ne pose pas de questions, je ne pourrais pas avancer...

animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention 738

ok tu peux mettre le sujet en resolu

besten Messages postés 90 Date d'inscription Statut Membre Dernière intervention

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 ?

Discussions similaires

menu caché

Comment activer le Bluetooth sur une TV Samsung ?

Mon PC marque press the esc key for startup menu

Déblocage du mode hôtel Philips 20HF5234/10

Activer le bluetooth sur smart TV Samsung

Votre réponse

Discussions similaires