Menu déroulant avec CSS...

Résolu
parla -  
 parla -
Bonjour, j'ai une question par rapport à un menu déroulant fait avec du CSS... Je me demandais comment on fait pour que les sous-menus qui découlent du premier élément principal du menu puissent occuper un plus long espace... Bon en gros, c'est que si la première boite a une largeur de 50px, et bien les boites qui en découlent (sous-menus) ont tous, on dirait, une largeur de 50 px. Je peux mettre la cellule plus grande, par exemple 150px, mais là, on voit bien que la cellule est plus grande, mais le texte et la couleur de background et tout reste prit dans seulement 50px et il y a 100px blanc qui ne servent a rien (pour un total de 150px). Donc, comment faire pour que, meme si ma cellule de base mesure 50px, mes sous-menus puissent être plus longs et que tout l'espace puisse être occupé? Voilà le bout du code de style du menu pour vous donner une idée... : 






<style type="text/css"> 
#monmenu {font-family: trebuchet ms,arial,tahoma,verdana,sans-serif;font-size: 90%;font-weight:bold;}

#monmenu ul ul {display: none; position: absolute; left: 164px; top: -1px; margin:0px; padding: 0px; border: 1px solid #B0B0B0; width: 150px;}

#monmenu li {list-style-type: none; position: relative; width: 160px; background-color: #E0E0E0; padding: 2px; margin: 0px; float: left}

#monmenu li:hover, #monmenu li.sfhover {background-color: #FFFF70;}

#monmenu li a {text-decoration:none;}

#monmenu li:hover ul.niveau2, #monmenu li li:hover ul.niveau3, #monmenu li.sfhover ul.niveau2, #monmenu li li.sfhover ul.niveau3 {display: block}

#monmenu li.plus {background-position:right; background-image: url(illustrations/fdroite.gif); background-repeat: no-repeat; border-bottom: 1px solid #B0B0B0;}
</style>


Merci!




A voir également:

9 réponses

Réponse 1 / 9
parla
 
Et aussi, en y pensant, je ne suis pas capable de coller mon menu complètement à gauche dans ma page (j'utilise une page uniquement pour ce menu...) . Est-ce qu'il y a quelque chose qui devrait être changé pour l'alignement; pour rendre possible de le coller dans le coin supérieur gauche complètement de la page?! Merci beaucoup!
0
Réponse 2 / 9
Stéphane18 Messages postés 372 Date d'inscription   Statut Membre Dernière intervention   132
 
Salut, tu peux aussi montrer la structure html de ton menu ?

Par hasard tu ne serait pas la Parla de ce sujet:
https://forums.commentcamarche.net/forum/affich-21979419-besoin-d-aide-pour-alignement
0
Réponse 3 / 9
parla
 
Oui, c'est bien moi. Voilà le code de la structure : 


<body>

<div id="monmenu">


<ul class="niveau1">
	<li>Menu

			<li><a href="#">Élément 1</a></li>
			
			
			<li><a href="#">Élément 2</a></li>
			

			<li class="plus"><a href="#">Élément 3</a>
				<ul class="niveau2">
				<li><a href="#">Sous-élément 3.1</a></li>
				<li><a href="#">Sous-élément 3.2</a></li>
				</ul>
			</li>
			
			<li class="plus"><a href="#">Élément 4</a>
				<ul class="niveau2">
				<li><a href="#">Sous-élément 4.1</a></li>
				<li><a href="#">Sous-élément 4.2</a></li>
				<li><a href="#">Sous-élément 4.3</a></li>
				</ul>
			</li>
			
			<li><a href="#">Élément 5</a></li>
			

	</li>
</ul>


</div>



</body>
0
Réponse 4 / 9
Stéphane18 Messages postés 372 Date d'inscription   Statut Membre Dernière intervention   132
 
Première question c'est normal que lorsque je passe mon curseur sur l'Élément 3 le Sous-élément 3.1 apparait sous l'Élément 4 ?
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 9
parla
 
Je ne crois pas... pour moi ça fonctionne correctement, le sous menu apparait à gauche de la bonne ligne... !?
0
Réponse 6 / 9
parla
 
Je vois! C'est bizarre, parce que moi, le menu apparait à la verticale... les éléments sont empilés les uns sur les autres au lieu d'être à l'horizontal, et les sous-menus apparaissent à l'horizontal, d'où le fait que les sous-éléments 3 apparaissent "en dessous" de l'élément 4 !
0
Stéphane18 Messages postés 372 Date d'inscription   Statut Membre Dernière intervention   132
 
J'ai enlevé le float: left; et la les éléments sont les uns en dessous des autres !
0
parla
 
Ah oui, bien sur! Désolé je n'avais pas remarqué qu'il était présent dans le code ! >.<
0
Réponse 7 / 9
Stéphane18 Messages postés 372 Date d'inscription   Statut Membre Dernière intervention   132
 
Sinon pour répondre à ta première question pour que les sous-éléments aies une taille différente des éléments tu dois ajouter ça: 

#monmenu ul ul li{  
	margin:0px; 
	padding: 0px;  
	width: 250px; 
	background-color: #E0E0E0;
}
0
Réponse 8 / 9
bg62 Messages postés 23732 Date d'inscription   Statut Modérateur Dernière intervention   2 409
 
vois ici:
https://www.unesourisetmoi.info/menuv1/index.php
menu vertical déroulant, avec les sources pour le personnaliser :) 
<div id="menu">
	<div class="menu" id="menu1" onclick="afficheMenu(this)">
		<a href="#">Cliquez-moi</a>
	</div>
	<div id="sousmenu1" style="display:none">
		<div class="sousmenu">
			<a href="#">Sous-Menu 1.1</a>
		</div>
		<div class="sousmenu">
			<a href="#">Sous-Menu 1.2</a>
		</div>
		<div class="sousmenu">
			<a href="#">Sous-Menu 1.3</a>
		</div>
		<div class="sousmenu">
			<a href="#">Sous-Menu 1.4</a>
		</div>
	</div>
	
	<div class="menu" id="menu2" onclick="afficheMenu(this)">
		<a href="#">ICI aussi</a>
	</div>
	<div id="sousmenu2" style="display:none">
		<div class="sousmenu">
			<a href="#">Sous-Menu 2.1</a>
		</div>
		<div class="sousmenu">
			<a href="#">Sous-Menu 2.2</a>
		</div>
		<div class="sousmenu">
			<a href="#">Sous-Menu 2.3</a>
		</div>
	</div>
	
	<div class="menu" id="menu3">
		<a href="#">Pas de sous-menu</a>
	</div>
	
	<div class="menu" id="menu4" onclick="afficheMenu(this)">
		<a href="#">Menu déroulant</a>
	</div>
	<div id="sousmenu4" style="display:none">
		<div class="sousmenu">
			<a href="#">Sous-Menu 4.1</a>
		</div>
		<div class="sousmenu">
			<a href="#">Sous-Menu 4.2</a>
		</div>
		<div class="sousmenu">
			<a href="#">Sous-Menu 4.3</a>
		</div>
		<div class="sousmenu">
			<a href="#">Sous-Menu 4.4</a>
		</div>
		<div class="sousmenu">
			<a href="#">Sous-Menu 4.5</a>
		</div>
	</div>
</div>

le 'www' est fait aussi pour communiquer, partager et échanger, non ?
merci d'avoir la politesse de répondre à ceux qui essaient de vous aider
0
Réponse 9 / 9
parla
 
Merci beaucoup, Stéphane18, ça fonctionne!!!

Et merci aussi pour la suggestion, bg62, je vais regarder ça.

Et est-ce que quelqu'un aurait une idée pour le problème du positionnement dans la page... je ne suis toujours pas capable de coller le menu complètement dans le coin supérieur gauche..

Merci à tous!
0
Stéphane18 Messages postés 372 Date d'inscription   Statut Membre Dernière intervention   132
 
Salut parla, as tu essayé ceci: 

#monmenu ul {
	margin:0px; 
	padding: 0px;
}
0
parla
 
Oui, j'ai essayé... et ça ne colle pas le menu sur la gauche. Par contre, quand j'ajoute quelque chose d'autre dans la page (par exemple une image juste en dessous du menu), elle se colle sur le côté gauche... mais le menu reste toujours décalé
0
Stéphane18 Messages postés 372 Date d'inscription   Statut Membre Dernière intervention   132
 
Et en ajoutant: 

body{
    margin: 0;
	padding: 0;
}
0
parla
 
Oui, j'ai fini par trouver un arrangement qui fonctionne! Merci beaucoup pour ta précieuse aide ! Je n'ai pas beaucoup d'expérience en programmation et des fois, c'est difficile de cerner et de voir tout ce qui doit être entré dans le code. Merci encore!!
0

Discussions similaires

Suppression listes déroulantes
Archa -
Sam -

5 réponses
Supprimer liste déroulante Excel
SamAlex -
b@bd -

8 réponses
Effacer liste déroulante
gabrielle -
jmps -

3 réponses
menu caché
laurent -
ChariduP -

7 réponses
Effacer le contenue d'une cellule avec liste déroulante
lebutters -
lebutters -

7 réponses