Menu déroulant avec CSS...

Résolu/Fermé

parla - 10 mai 2011 à 18:19
parla - 11 mai 2011 à 21:03

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:

Menu déroulant avec CSS...
Menu déroulant excel - Guide
Menu démarrer windows 11 - Guide
Excel menu déroulant en cascade - Guide
Canon quick menu - Télécharger - Utilitaires
Menu demarrer - Guide

9 réponses

Réponse 1 / 9

parla
10 mai 2011 à 19:08

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!

Réponse 2 / 9

Stéphane18 Messages postés 372 Date d'inscription jeudi 3 mars 2011 Statut Membre Dernière intervention 20 février 2019 132
10 mai 2011 à 19:08

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

Réponse 3 / 9

parla
10 mai 2011 à 19:21

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>

Réponse 4 / 9

Stéphane18 Messages postés 372 Date d'inscription jeudi 3 mars 2011 Statut Membre Dernière intervention 20 février 2019 132
10 mai 2011 à 20:02

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 ?

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

Posez votre question

Réponse 5 / 9

parla
10 mai 2011 à 20:10

Je ne crois pas... pour moi ça fonctionne correctement, le sous menu apparait à gauche de la bonne ligne... !?

Réponse 6 / 9

parla
10 mai 2011 à 20:25

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 !

Stéphane18 Messages postés 372 Date d'inscription jeudi 3 mars 2011 Statut Membre Dernière intervention 20 février 2019 132
10 mai 2011 à 20:30

J'ai enlevé le float: left; et la les éléments sont les uns en dessous des autres !

parla
11 mai 2011 à 01:16

Ah oui, bien sur! Désolé je n'avais pas remarqué qu'il était présent dans le code ! >.<

Réponse 7 / 9

Stéphane18 Messages postés 372 Date d'inscription jeudi 3 mars 2011 Statut Membre Dernière intervention 20 février 2019 132
11 mai 2011 à 01:40

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;
}

Réponse 8 / 9

bg62 Messages postés 23590 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 15 avril 2024 2 362
Modifié par bg62 le 11/05/2011 à 09:20

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

Réponse 9 / 9

parla
11 mai 2011 à 18:38

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!

Stéphane18 Messages postés 372 Date d'inscription jeudi 3 mars 2011 Statut Membre Dernière intervention 20 février 2019 132
11 mai 2011 à 20:31

Salut parla, as tu essayé ceci:

#monmenu ul {
	margin:0px; 
	padding: 0px;
}

parla
11 mai 2011 à 20:49

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é

Stéphane18 Messages postés 372 Date d'inscription jeudi 3 mars 2011 Statut Membre Dernière intervention 20 février 2019 132
11 mai 2011 à 20:53

Et en ajoutant:

body{
    margin: 0;
	padding: 0;
}

parla
11 mai 2011 à 21:03

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!!

Discussions similaires

Suppression listes déroulantes

les entrées et les sortées

Supprimer liste déroulante Excel

[CSS] Forcé retour à la ligne

trait horizontal avec du css

Discussions similaires

Newsletters