[CSS] menu déroulant vertical
Résolu
okuni
Messages postés
1325
Statut
Membre
-
young_keating Messages postés 38 Statut Membre -
young_keating Messages postés 38 Statut Membre -
Bonjour,
J'ai récupérer ce tuto pour faire un menu déroulant en CSS
http://www.tuto-fr.com/tutoriaux/tutorial-menu-deroulant-css.php
Le seul problème c'est que les sous-menus s'ouvre sur la droite.
J'aimerais qu'ils s'ouvrent sur le bas mais pas en dessous de tout le menu, juste en dessous du titre du menu
exemple :
Et non pas comme dans le tuto
Merci de votre aide.
J'ai récupérer ce tuto pour faire un menu déroulant en CSS
http://www.tuto-fr.com/tutoriaux/tutorial-menu-deroulant-css.php
Le seul problème c'est que les sous-menus s'ouvre sur la droite.
J'aimerais qu'ils s'ouvrent sur le bas mais pas en dessous de tout le menu, juste en dessous du titre du menu
exemple :
Menu 1 Menu 2 sous-menu 1 sous-menu 2 Menu 3
Et non pas comme dans le tuto
Menu 1
Menu 2 sous-menu 1
sous-menu 2
Menu 3
Merci de votre aide.
A voir également:
- Menu déroulant vertical html css
- 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
- Supprimer liste déroulante Excel ✓ - Forum Excel
9 réponses
c'est un code que j'ai modifié il est pas encore au point mais j'espère qu'il pourra t'aider
#body
{
/*behavior: url("csshover.htc");*/
font-size:10pt;
font-family:"arial", serif;
color:black;
}
#baniere
{
margin:0;/*marges extérieures au bloc*/
padding:10;/*marges intérieures au bloc*/
width:635; /*largueur*/
height:115;/*hauteur*/
float: left;/*alignement sur le bloc de gauche*/
text-align:center;/* texte centré*/
/*background-color: #e5cdff;*//*couleur de fond*/
}
#dateheure
{
margin:0;
padding:10;
width:150;
height:115;
float:right;
text-align:center;
/*background-color: #e5ffcd;*/
}
#identification
{
margin: 0;
margin-right: 0;
padding:10;
width:150;
height:115;
float: left;
text-align:center;
/*background-color: #ffcde5;*/
}
#page
{
margin: 0;
padding:10;
width:805;
height:500;
float:right;
text-align:center;
/*background-color: #fee6be;*/
}
#menu
{
margin: 0;
padding:10;
width:150;
height:500;
float: left;
/*background-color: #c5d5fc;*/
}
#total
{
margin: 0;
width:995;
height:650;
background: url("fond3.jpg") no-repeat;
float: left;
/*background-color: #ff7171;*/
}
.horloge
{/*forme de l'input de l'horloge*/
border: 0;/*pas de bordure*/
background-color : transparent;/*fond transparent*/
}
.bouton
{/*forme des input des boutons*/
border: 2px outset #122650; /*bordure noir des bouton*/
font-weight: bold; /*ecriture en gras*/
background-color: #ffcc99 ;/*orange*/ /*#e5cdff; couleur de fond violet*/
cursor: pointer;
}
.saisie
{/*forme des input des zones de texte*/
border: 0; /*pas de bordure*/
background-color : #ffffff;/* fond blanc*/
}
.forme
{/*forme des textarea*/
border: 0;/*pas de bordure*/
background-color : #ffffff;/* fond blanc*/
}
.tete
{
width:200px;
border: 0;/*pas de bordure*/
}
.mef
{
border: 1px #f19516 solid;/*bordure de 1px*/
text-align: center;
}
.first_letter
{
color:#f19516 ;/*orange*/ /*#ec30ff; En violet */
text-transform: capitalize; /*majuscule*/
font-size: 1.2em; /* Ecrit légèrement plus gros que la normale */
}
h4
{
text-decoration:blink;/*effet clignotant*/
}
#menu_dynamique li a /*mise en forme des liens*/
{
display:block;/*affichage de type bloc*/
height:22px;/*hauteur*/
text-decoration:none;/*pas d'effet*/
}
#menu_dynamique /*mise en page de la div*/
{
width:auto;/*largeur automatique*/
margin:0; /*marge extérieur*/
padding:0; /*marge intérieur*/
}
#menu_dynamique ul /*menu sous forme de liste*/
{
width:auto;/*largeur automatique*/
list-style:none;/*désactivation des puces*/
padding:0;/*marge extérieur*/
margin:0;/*marge intérieur*/
}
#menu_dynamique ul li /*mise en forme des li*/
{
width:auto;/*largeur automatique*/
margin-left:0;/*marge extérieur gauche à 0*/
padding-left:10;/*marge intérieur gauche à 10*/
height:auto;/*hauteur automatique*/
}
#menu_dynamique ul li ul /*activation désactivation des sous menu*/
{
width:auto;/*largeur automatique*/
display:none;/*cacher les zones indésirables*/
}
/*masque les sous-sous-menu*/
#menu_dynamique ul li ul,
#menu_dynamique ul li:hover ul li ul,
#menu_dynamique ul li:hover ul li:hover ul li ul
{
width:auto;/*largeur automatique*/
display:none;/*cacher les zones indésirables*/
}
/*affichage des zones au survol du lien*/
#menu_dynamique ul li:hover ul,
#menu_dynamique ul li:hover ul li:hover ul,
#menu_dynamique ul li:hover ul li:hover ul li:hover ul
{
width:auto;/*largeur automatique*/
display:block;/*affichage de type bloc*/
position:relative; /*positionnement relatif des sous-menu
top:0px;/*position haute des sous menu à 0pixel en dessous du menu dont il découle*/
left:10px;/*position des sous menu à 10pixels de la positon gauche du menu dont il découle*/
}
#menu_dynamique ul li.extend:hover ul li.end a /*retire les images de fond des sous menu .end*/
{
width:auto;/*largeur automatique*/
background-image:none;/*pas d'image de fond*/
}
/*mise en forme du texte et du fond du menu */
#menu_dynamique li a:hover
{
width:auto;/*largeur automatique*/
color:black; /*couleur du texte noir*/
background-color: transparent;/*fond transparent*/
}
/*couleur du fond au survol des menu et sous-menu*/
#menu_dynamique li a:hover,
#menu_dynamique ul li.extend:hover ul li.extend:hover ul li:hover a,
#menu_dynamique ul li.extend:hover ul li.extend:hover ul li.extend:hover ul li:hover a
{
width:auto;/*largeur automatique*/
background-color:#ffcc99 /*orange*/ /*#e5cdff; fond violet*/
}
/*masque les extention indésirables sous IE*/
#menu_dynamique ul li.extend:hover
{
width:auto;/*largeur automatique*/
height:auto;/*hauteur automatique*/
overflow:hidden;/*masque les débordement intempestif sous IE*/
}
/*masque les extention indésirables sous FF*/
html>body #menu_dynamique ul li.extend:hover
{
width:auto;/*largeur automatique*/
height:auto;/*hauteur automatique*/
overflow:visible; /*masque les débordement intempestif sous FF*/
}