[CSS] menu déroulant vertical

Résolu
okuni Messages postés 1325 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 :
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.
--
L'amour, c'est comme les spaghettis; quand c'est mou, c'est cuit. (proverbe belge)
Configuration: Windows 2003
Firefox 3.0.4

9 réponses

  1. ecco Messages postés 89 Statut Membre 26
     
    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