Rechercher : dans
Par :

[CSS] menu déroulant vertical

Dernière réponse le 27 fév 2009 à 11:07:31 okuni, le 15 déc 2008 à 15:07:49 
 Signaler ce message aux modérateurs

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

1

okuni, le 16 déc 2008 à 22:04:45

UP ^^ L'amour, c'est comme les spaghettis; quand c'est mou, c'est ­cuit. (proverbe belge)

Répondre à okuni

2

ecco, le 24 fév 2009 à 12:10:55
  • +1

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*/
}
l'amour vous offre une deuxième vie le tout c'est de savoir la saisir et de faire en sorte de le garder

Répondre à ecco

3

okuni, le 24 fév 2009 à 14:49:52

Merci, je vais voir ce que je peux faire avec. L'amour, c'est comme les spaghettis; quand c'est mou, c'est ­cuit. (proverbe belge)

Répondre à okuni

4

okuni, le 25 fév 2009 à 14:09:34

Heu en faite, tu m'a donné une page css complète, mais qu'est ce qui concerne le menu??
et c'est quoi le code en HTML?
ce sont des <ul>? ou un tableau? L'amour, c'est comme les spaghettis; quand c'est mou, c'est cuit. (proverbe belge)

Répondre à okuni

5

ecco, le 26 fév 2009 à 09:44:40
  • +1

Pour ce qui est du css du menu s'appel menu tout ce qui contient menu si rapporte

et pour le html c'est une structure en ul li bien sur

voici le html qui vas avec la feuille de style que je t'ai donnée bien sur tout n'est pas a prendre

c'est a toi de composer avec

<html>	
	<body>
		<ul>
		    <li class="end"><a href="index.php"><b><span class="first_letter">A</span>ccueil</b></a></li>
			<li class="end"><a href="index.php?page=inscription"><span class="first_letter">S</span>'inscrire</a></li>
		    <li class="extend"><a href="#"><span class="first_letter">E</span>space client</a>
		        <ul>
					<li class="end"><a href="index.php?page=coordonnee"><span class="first_letter">C</span>oordonnées</a></li>
					<li class="extend"><a href="#"><span class="first_letter">C</span>ommandes</a>
						<ul>
							<li class="end"><a href="index.php?page=commander"><span class="first_letter">C</span>ommander</a></li>
							<li class="end"><a href="index.php?page=suivi"><span class="first_letter">S</span>uivi de commande</a></li>
						</ul>
					</li>
		        </ul>
		    </li>
			<li class="extend">
		        <a href="#"><span class="first_letter">E</span>space fournisseur</a>
		        <ul>
					<li class="end"><a href="index.php?page=coordonnee"><span class="first_letter">C</span>oordonnées</a></li>				
					<li class="end"><a href="index.php?page=consultstock"><span class="first_letter">C</span>onsultation stocks</a></li>
		        </ul>
		    </li>
				<li class="extend">
		        <a href="#"><span class="first_letter">E</span>space transporteur</a>
		        <ul>
					<li class="end"><a href="index.php?page=coordonnee"><span class="first_letter">C</span>oordonnées</a></li>				
					<li class="extend"><a href="tournee"><span class="first_letter">T</span>ournée</a></li>
		        </ul>
		    </li>
			<li class="extend"><a href="#"><span class="first_letter">E</span>space Magasin</a>
		        <ul>
					<li class="extend"><a href="#"><span class="first_letter">P</span>roduits</a>
						<ul>
							<li class="end"><a href="index.php?page=famille"><span class="first_letter">C</span>réation famille</a></li>
							<li class="end"><a href="index.php?page=produit"><span class="first_letter">C</span>réation produit</a></li>
						</ul>
					</li>
					<li class="extend"><a href="#"><span class="first_letter">S</span>tocks</a>
						<ul>
							<li class="end"><a href="index.php?page=reception"><span class="first_letter">E</span>ntrées</a></li>
							<li class="end"><a href="index.php?page=sortie"><span class="first_letter">S</span>orties</a></li>
						</ul>
					</li>
					<li class="extend"><a href="#"><span class="first_letter">L</span>ivrabilitées</a>
						<ul>
							<li class="end"><a href="index.php?page=#"><span class="first_letter">E</span>ntrées</a></li>
							<li class="end"><a href="index.php?page=#"><span class="first_letter">S</span>orties</a></li>
						</ul>
					</li>
		        </ul>
		    </li>
		    <li class="end"><a href="index.php?page=partenaire"><span class="first_letter">P</span>artenaires</a></li>	
			<li class="end"><a href="index.php?page=contact"><span class="first_letter">C</span>ontact</A>
		</ul>
	</body>
</html>


j'espere que sa pourra t'aider



l'amour vous offre une deuxième vie le tout c'est de savoir la saisir et de faire en sorte de le garder

Répondre à ecco

6

okuni, le 26 fév 2009 à 15:13:20

Merci, je vais voir ça tout de suite. L'amour, c'est comme les spaghettis; quand c'est mou, c'est ­cuit. (proverbe belge)

Répondre à okuni

7

okuni, le 26 fév 2009 à 17:47:27

Merci beaucoup,
c'est ce qu'il me fallait :D L'amour, c'est comme les spaghettis; quand c'est mou, c'est ­cuit. (proverbe belge)

Répondre à okuni

8

 ecco, le 27 fév 2009 à 11:07:31

De rien on est la pour sa l'amour vous offre une deuxième vie le tout c'est de savoir ­la saisir et de faire en sorte de le garder

Répondre à ecco