[CSS] menu déroulant vertical

Résolu/Fermé
okuni Messages postés 1221 Date d'inscription jeudi 4 septembre 2008 Statut Membre Dernière intervention 2 janvier 2014 - 15 déc. 2008 à 15:07
young_keating Messages postés 32 Date d'inscription jeudi 17 juin 2010 Statut Membre Dernière intervention 4 mai 2011 - 13 juil. 2010 à 10:06
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 :
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.

9 réponses

ecco Messages postés 87 Date d'inscription mardi 12 juin 2007 Statut Membre Dernière intervention 10 juillet 2009 26
24 févr. 2009 à 12:10
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*/
}
4