Sujet Précédent Sujet Suivant

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:

Menu
Menu déroulant excel - Guide
Windows 11 menu démarrer classique - Guide
Canon quick menu - Télécharger - Utilitaires
Réinitialiser menu démarrer windows 10 - Guide
Menu demarrer windows 10 - Guide

7 réponses

Réponse 1 / 7

animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 737
24 avril 2014 à 15:00

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 mercredi 19 octobre 2011 Statut Membre Dernière intervention 29 septembre 2023
24 avril 2014 à 15:24

Merci beaucoup.

Réponse 3 / 7

besten Messages postés 90 Date d'inscription mercredi 19 octobre 2011 Statut Membre Dernière intervention 29 septembre 2023
24 avril 2014 à 16:56

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 jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 737
Modifié par animostab le 24/04/2014 à 17:14

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 mercredi 19 octobre 2011 Statut Membre Dernière intervention 29 septembre 2023
24 avril 2014 à 17:34

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 jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 737
24 avril 2014 à 17:58

<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 mercredi 19 octobre 2011 Statut Membre Dernière intervention 29 septembre 2023
24 avril 2014 à 18:07

Je n'ai pas compris pour le CSS.

animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 737
24 avril 2014 à 20:07

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 mercredi 19 octobre 2011 Statut Membre Dernière intervention 29 septembre 2023
24 avril 2014 à 22:53

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 jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 737
Modifié par animostab le 25/04/2014 à 00:32

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 mercredi 19 octobre 2011 Statut Membre Dernière intervention 29 septembre 2023
25 avril 2014 à 10:08

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 jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 737
25 avril 2014 à 13:21

ok tu peux mettre le sujet en resolu

besten Messages postés 90 Date d'inscription mercredi 19 octobre 2011 Statut Membre Dernière intervention 29 septembre 2023
6 mai 2014 à 18:04

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

Comment retrouver le bouton menu de Tv Tcl

menu caché

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

Comment activer le Bluetooth sur une TV Samsung ?

les entrées et les sortées