Probleme pour faire sortir mon menu déroulant sur la droite

Marsh Posté le 15-11-2009 à 20:58:30

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 :

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

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

Reply

Marsh Posté le 15-11-2009 à 20:58:30

Reply

Marsh Posté le 16-11-2009 à 19:28:08

Désolé les gens, j'up celui la car il y a un autre poste créé par moi meme il y a quelques jours et qui est en javascript.

cependant au final le javascript est tres embettant avec lse histoire d'active X a telecharger. Donc c'est uniquement en CSS/HTML que je veux le faire comme ci dessus. Donc c'est cette conversation sur ce post qui m'interesse, pas l'autre.

Vous n'avez donc aucune idée pour m'aider ?

Reply

Marsh Posté le 17-11-2009 à 14:31:58

oula j'ai l'impression qu'il faut que tu revois tes bases... déja, commence par balancer le lien d'ou tu as trouvé ce menu. parce que la on ne sait pas ce que tu as modifié.

ensuite, pourquoi répéter 4 fois les class css si seules les couleurs changent?
tu crée un class .menuDeroulant qui contient tout ce qui est commun, et après une autre classe qui contient les couleurs, ou alors un id...

et enfin, mini-hs, mais rapport à ton autre poste, je vois pas le rapport entre le javascript et les activex... tu confonds 2 techno sans rapport entre elles.

Reply

Marsh Posté le 17-11-2009 à 19:05:06

Je t'ai envoyé ici le code source extacte de ce que j'ai recupéré sur internet, sans aucune modification et qui marche parfaitement malgré les maladresses apparentes

Oki pour les class css, je modifierai ca une fois mon probleme initial résolu (histoire de pas bosser pour rien). Merci, c'est vrai qu'il est plutot lourd a digerer ce css pour un si petit menu.

Pour le javascript : l'autre jour j'ai pris sur le net un code de menu deroulant tout fait en javascript (present sur l'autre message si je ne me trompe pas), mais j'ai abandonné celui ci pour 2 raisons :
- quand tu veux ouvrir sa page, tu dois installer un activeX ou je ne sais plus trop quoi donc c'est plutot embettant si des utilisateurs super stressés arrivent mais ne veulent rien installer, le menu ne marchera pas. (EDIT : en faite c'est probleme lorsque l'utilisation de java est désactivé chez l'utilisateur)
- il est beaucoup beaucoup plus beau le menu que j'ai mis au dessus et ne pose aucun probleme....

... mise a part le fait qu'il s'ouvre vers le bas alors que je souhaiterais qu'il souvre vers la droite.

J'ai beau tout trifouiller, je n'arriver pas a la faire sortir a droite...

Help me svp

Source originale : http://photo.graph.over-blog.com/a [...] nt50517536

Message édité par charlelechauve le 17-11-2009 à 19:16:39

Reply

Probleme pour faire sortir mon menu déroulant sur la droite

Sujets relatifs:

Leave a Replay