Menu déroulant
Résolu
a6dik
Messages postés
2
Date d'inscription
Statut
Membre
Dernière intervention
-
a6dik Messages postés 2 Date d'inscription Statut Membre Dernière intervention -
a6dik Messages postés 2 Date d'inscription Statut Membre Dernière intervention -
Salut les kids,
Je cherche à faire un menu déroulant en utilisant le css.
Voilà mon code html:
et voici mon css
#nav{
}
#background_menu{
display:block;
margin-top:0px;
margin-left:auto;
margin-right:auto;
background-color:#666666;
width:100%;
height:42px;
float:left;
}
#menu{
float:left;
height:100%;
margin-left:190px;
}
.element_menu{
float:left;
margin-left: 20px;
margin-right: 20px;
vertical-align:middle;
font-family:arial, sans serif;
color:white;
}
.element_menu a:hover{
color:#FF9900;
text-decoration:none;
}
.element_menu ul li ul{
display:none;
}
#sub_menu ul{
margin:0;
padding:0;
list-style-type:none;
text-align:center;
}
#sub_menu li {
float:left;
margin:auto;
padding:0;
background-color:#666666;
}
#sub_menu li a {
display:block;
width:100px;
color:white;
text-decoration:none;
padding:5px;
}
#sub_menu ul li {
display:none;
}
#sub_menu li:hover ul li{
float:none;
}
#sub_menu ul li:hover ul{
display:block;
}
ul{
list-style-type:none;
}
a {
color: white;
text-decoration: none;
}
#id_client{
display:block;
background-color:black;
width:100%;
height:70px;
float:left;
font-family:arial, sans serif;
color:#666666;
}
#id_client p{
text-align:right;
margin-right:190px;
padding-top:30px;
}
le menu ne se déroule pas, si quelqu'un peut me donner une explication je lui en serrait éternellement reconnaissant =)
Merci d'avance !
Je cherche à faire un menu déroulant en utilisant le css.
Voilà mon code html:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="style.css"/> <meta charset="utf-8" /> <title>test menu</title> </head> <body> <header> <nav id="nav"> <div id="id_client"> <p>nom client, adresse, cp, ville</p> </div> <div id="background_menu"> <div id="menu"> <ul> <div class="element_menu"> <li><a href="mon_compte.html">Mon compte</a></li> <div id="sub_menu"> <ul> <li><a href="user.html">Utilisateur</a></li> <li><a href="adress_livr.html">Adresse de livraison</a></li> <li><a href="gest_tarif.html">Gestion des tarifs</a></li> <li><a href="lieux_repres.html">Lieux représentation</a></li> <li><a href="log_out.html">Déconnection</a></li> </ul> </div> </div> <div class="element_menu"> <li><a href="preparation_commande.html">Préparation de la commande</a></li> <div id="sub_menu"> <ul> <li><a href="billeterie.html">Billeterie</a></li> <li><a href="bracelet.html">Bracelet</a></li> <li><a hraf="reassort.html">Réassort</a></li> </ul> </div> </div> <div class="element_menu"> <li><a href="demandes_envoyees.html">Demandes envoyées (*)</a></li> </div> <div class="element_menu"> <li><a href="demande.html">Ma demande</a></li> </div> <div class="element_menu"> <li><a href="aide.html">Aide</a></li> </div> </ul> </div> </div> </nav> </header> </body> </html>
et voici mon css
#nav{
}
#background_menu{
display:block;
margin-top:0px;
margin-left:auto;
margin-right:auto;
background-color:#666666;
width:100%;
height:42px;
float:left;
}
#menu{
float:left;
height:100%;
margin-left:190px;
}
.element_menu{
float:left;
margin-left: 20px;
margin-right: 20px;
vertical-align:middle;
font-family:arial, sans serif;
color:white;
}
.element_menu a:hover{
color:#FF9900;
text-decoration:none;
}
.element_menu ul li ul{
display:none;
}
#sub_menu ul{
margin:0;
padding:0;
list-style-type:none;
text-align:center;
}
#sub_menu li {
float:left;
margin:auto;
padding:0;
background-color:#666666;
}
#sub_menu li a {
display:block;
width:100px;
color:white;
text-decoration:none;
padding:5px;
}
#sub_menu ul li {
display:none;
}
#sub_menu li:hover ul li{
float:none;
}
#sub_menu ul li:hover ul{
display:block;
}
ul{
list-style-type:none;
}
a {
color: white;
text-decoration: none;
}
#id_client{
display:block;
background-color:black;
width:100%;
height:70px;
float:left;
font-family:arial, sans serif;
color:#666666;
}
#id_client p{
text-align:right;
margin-right:190px;
padding-top:30px;
}
le menu ne se déroule pas, si quelqu'un peut me donner une explication je lui en serrait éternellement reconnaissant =)
Merci d'avance !
A voir également:
- Menu déroulant
- Menu déroulant excel - Guide
- Excel menu déroulant en cascade - Guide
- Menu déroulant google sheet - Accueil - Guide bureautique
- Supprimer menu déroulant excel - Forum Excel
- Canon quick menu - Télécharger - Utilitaires
2 réponses
Salut
voici un tuto
http://css.mammouthland.net/menu-horizontal-deroulant-en-css.php
je n'ai pas regardé tout le code mais le problème doit venir des div dans le ul et aussi du fait que ce n'est pas placé après le </a> mais après le </li>
(on ne mets pas de div dans un ul mais seulement des li, accesoirement on peux mettre un div imbriqué dans un li)
Pour un menu deroulant on imbrique des ul (le sous menu qui se déroule) dans les li apres <a href="page">lien</a>
Un petit merci vaut mieux qu'une grande ignorance
voici un tuto
http://css.mammouthland.net/menu-horizontal-deroulant-en-css.php
je n'ai pas regardé tout le code mais le problème doit venir des div dans le ul et aussi du fait que ce n'est pas placé après le </a> mais après le </li>
(on ne mets pas de div dans un ul mais seulement des li, accesoirement on peux mettre un div imbriqué dans un li)
Pour un menu deroulant on imbrique des ul (le sous menu qui se déroule) dans les li apres <a href="page">lien</a>
Un petit merci vaut mieux qu'une grande ignorance
