Menu déroulant avec CSS...
Résolu
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... :
Merci!
<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!
9 réponses
-
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! -
Modérateurvois 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 -
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; } -
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 !
-
Je ne crois pas... pour moi ça fonctionne correctement, le sous menu apparait à gauche de la bonne ligne... !?
-
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 ?
-
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>
-
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 -
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!
