Discussion :

[enrico83600]

Salut,

j'ai pris sur le net un menu déroulant vertical en html/css auxquel j'ai apporté des modifications.
Cependant ce menu s'ouvre vers le bas quand on passela souris dessus et je ne trouve pas cela tres beau

Je souhaite donc qu'au passage de la souris, celui ci s'ouvre sur la droite (tout en gardant les sous menus les uns au dessus des autres bien entendu).

Voici une partie html :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 <ul id="menuDeroulant1">
<li><a href="http://liencategorie1.html">Accueil</a>
<ul class="sousMenu1">
<li><a href="http://liensousmenu1-cat1.html">Lien 1 de la catégorie 1</a> </li>
<li><a href="http://liensousmenu2-cat1.html">Lien 2 de la catégorie 1</a> </li>
<li><a href="http://liensousmenu3-cat1.html">Lien 3 de la catégorie 1</a> </li>
</ul>
</li>
</ul>
<br /><br />
<ul id="menuDeroulant2">
<li><a href="http://liencategorie2.html">L'IUP</a>
<ul class="sousMenu2">
<li><a href="http://liensousmenu1-cat2.html">Lien 1 de la catégorie 2</a> </li>
<li><a href="http://liensousmenu2-cat2.html">Lien 2 de la catégorie 2</a> </li>
<li><a href="http://liensousmenu3-cat2.html">Lien 3 de la catégorie 2</a> </li>
</ul>
</li>
</ul>

Et voici le CSS associé :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style type="text/css"><!--
#menuDeroulant1{ width: 131px; list-style-type: none; margin: 0; padding: 0; border: 0;} 
 
#menuDeroulant1 li{ float: left; margin: 0px; padding: 0; border: 0;} 
 
#menuDeroulant1 li:hover > .sousMenu1 { display: block; } 
 
#menuDeroulant1 .sousMenu1{ list-style-type: none; margin: 0; padding: 0; border: 0;}
#menuDeroulant1 .sousMenu1{ display: none; list-style-type: none; margin: 0; padding: 0; border: 0;} 
 
#menuDeroulant1 .sousMenu1 li{ float: none; margin: 0; padding: 0; border: 0;} 
 
#menuDeroulant1 li{ float: left; width: 131px; margin: 0; padding: 0; border: 0; font-size:11px;} 
 
#menuDeroulant1{ width: 131px; list-style-type: none; margin: 0; padding: 0; border: 0; position: absolute; top: 100; z-index:1000;} 
 
#menuDeroulant1 li a:link, #menuDeroulant1 li a:visited{ display: block; height: 1%; color: #FFFFFF; background: #3B4E77; margin: 0; padding: 4px 8px; border-bottom: 1px solid #FFFFFF; text-decoration: none;}
#menuDeroulant1 li a:hover { background-color: #99CCFF; }
#menuDeroulant1 li a:active { background-color: #FF3300; }
#menuDeroulant1 .sousMenu1 li a:link,#menuDeroulant1 .sousMenu1 li a:visited{ display: block; color: #FFFFFF; margin: 0; border: 0; text-decoration: none; background-color:#CCCCCC;}
#menuDeroulant1 .sousMenu1 li a:hover{ background-image: none; background-color: #FF3300;}
--></style>

Et idem pour #menuderoulant2 (et autres, j'ai 4 menu déroulant les uns en dessous des autres mais leur css est différant car ils auront chacun une couleur différentes. Ca fait beaucoup de ligne au final mais tant pis c'est pas un souci)

A mon avis, pour que mon menu s'ouvre sur la droite plutot que vers le bas ca vient du z-index ou de position: absolute. Enfin, j'ai fais pas mal de test mais je n'y arrive pas.

Aidez moi s'il vous plait :pt1cable:

[enrico83600]

Excusez moi pour ce petit up, je sais que vous n'etes pas payé pour ça mais c'est un peu urgent : projet tutoré pour mon école

Si vous trouvez le codage de ce menu déroulant trop biscornu, je suis ouvert à toutes vos propositions mais il faut absolument que le design de ce menu soit le même (ou extremement proche au niveau taille/couleur) que celui proposé ci dessus, qu'il ne soit pas en javascript (pour eviter aux utilisateur de devoir telecharger l'active X) et qu'il ne se déroule pas en dessous mais qu'il sorte sur la droite.

Merci à vous

[12monkeys]

Bonsoir

Tu peut éventuellement essayer de jouer sur les marges ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

#menuDeroulant1 .sousMenu1{ display: none; list-style-type: none; margin: -23px 0 0 131px; padding: 0; border: 0;}

[enrico83600]

Encore une fois tu me sauve. Merci beaucoup, ca marche !