A voir également:
- Aligner un groupe de listes incluant des sous listes HTML CSS
- Créer un groupe whatsapp - Guide
- Liste déroulante de choix excel - Guide
- Gertrude a préparé la liste des affaires à prendre pour l'excursion. juliette a modifié cette liste en utilisant le mode suivi des modifications proposé par le traitement de texte. - Guide
- Editeur html - Télécharger - HTML
- Liste de diffusion whatsapp - Guide
2 réponses
MedAliMeziane
Messages postés
167
Date d'inscription
jeudi 9 octobre 2008
Statut
Membre
Dernière intervention
3 mars 2018
172
19 nov. 2015 à 12:51
19 nov. 2015 à 12:51
Bonjour,
J'espère que l'exemple ci-joint vous donne plus d'idée sur la conception du menu horizontal déroutant.
Bon travail
J'espère que l'exemple ci-joint vous donne plus d'idée sur la conception du menu horizontal déroutant.
Bon travail
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 1.3em;
}
#menu-deroulant, #menu-deroulant ul {
padding: 0;
margin: 0;
list-style: none;
}
#menu-deroulant {
/* on centre le menu dans la page */
text-align: center;
}
#menu-deroulant li {
/* on place les liens du menu horizontalement */
display: inline-block;
}
#menu-deroulant li:hover {
/* on place les liens du menu horizontalement */
background-color: #f5e79e;
}
#menu-deroulant ul li {
/* on enlève ce comportement pour les liens du sous menu */
display: inherit;
}
#menu-deroulant a {
text-decoration: none;
display: block;
color: #000;
}
#menu-deroulant ul {
position: absolute;
/* on cache les sous menus complètement sur la gauche */
left: -999em;
text-align: left;
z-index: 1000;
}
#menu-deroulant li:hover ul {
/* Au survol des li du menu on replace les sous menus */
left: auto;
}
#menu-deroulant ul li {
/* on enlève ce comportement pour les liens du sous menu */
background-color: #ebebeb;
border: 1px solid white;
}
</style>
</head>
<body>
<ul id="menu-deroulant">
<li><a href="#">Lien menu 1</a>
<ul>
<li><a href="#">lien sous menu 1</a></li>
<li><a href="#">lien sous menu 1</a></li>
<li><a href="#">lien sous menu 1</a></li>
<li><a href="#">lien sous menu 1</a></li>
</ul>
</li>
|
<li><a href="#">Lien menu 2</a>
<ul>
<li><a href="#">Lien sous menu 2</a></li>
<li><a href="#">Lien sous menu 2</a></li>
<li><a href="#">Lien sous menu 2</a></li>
<li><a href="#">Lien sous menu 2</a></li>
</ul>
</li>
|
<li><a href="#">Lien menu 3</a>
<ul>
<li><a href="#">Lien sous menu 3</a></li>
<li><a href="#">Lien sous menu 3</a></li>
<li><a href="#">Lien sous menu 3</a></li>
<li><a href="#">Lien sous menu 3</a></li>
</ul>
</li>
|
<li><a href="#">Lien menu 4</a></li>
|
<li><a href="#">Lien menu 5</a></li>
|
<li><a href="#">Lien menu 6</a></li>
</ul>
</body>
</html>
