Menu

[CSS] menu déroulant vertical [Résolu/Fermé]

Messages postés
1224
Date d'inscription
jeudi 4 septembre 2008
Dernière intervention
2 janvier 2014
- - Dernière réponse : young_keating
Messages postés
32
Date d'inscription
jeudi 17 juin 2010
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.
Afficher la suite 

9 réponses

Meilleure réponse
Messages postés
87
Date d'inscription
mardi 12 juin 2007
Dernière intervention
10 juillet 2009
43
4
Merci
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*/
}

Dire « Merci » 4

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 57666 internautes nous ont dit merci ce mois-ci

Messages postés
87
Date d'inscription
mardi 12 juin 2007
Dernière intervention
10 juillet 2009
43
1
Merci
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



J'ai un site ecommerce que j'ai créé par l'intermédiaire d'un fournisseur (amen.fr) savez-vous comment ont peut y ajouter un menu déroulant que l'on a réaliser avec un logiciel (Sothink DHTML Menu 9) ??
Messages postés
1224
Date d'inscription
jeudi 4 septembre 2008
Dernière intervention
2 janvier 2014
210
0
Merci
Merci, je vais voir ce que je peux faire avec.
Messages postés
1224
Date d'inscription
jeudi 4 septembre 2008
Dernière intervention
2 janvier 2014
210
0
Merci
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?
Messages postés
1224
Date d'inscription
jeudi 4 septembre 2008
Dernière intervention
2 janvier 2014
210
0
Merci
Merci, je vais voir ça tout de suite.
Messages postés
1224
Date d'inscription
jeudi 4 septembre 2008
Dernière intervention
2 janvier 2014
210
0
Merci
Merci beaucoup,
c'est ce qu'il me fallait :D
Messages postés
87
Date d'inscription
mardi 12 juin 2007
Dernière intervention
10 juillet 2009
43
0
Merci
de rien on est la pour sa
Messages postés
1224
Date d'inscription
jeudi 4 septembre 2008
Dernière intervention
2 janvier 2014
210
-1
Merci
UP ^^
-1
Merci
jai une question commen on integre le css dans le html car je voi qu'il y a un css et un html mais comment les associé svp?
young_keating
Messages postés
32
Date d'inscription
jeudi 17 juin 2010
Dernière intervention
4 mai 2011
2 -