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

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Probleme pour faire sortir mon menu déroulant sur la droite

charlelechauve

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:

Publicité

charlelechauve

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 ?

pataluc

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.

charlelechauve

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

FORUM HardWare.fr

Programmation

HTML/CSS

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

Sujets relatifs
Probleme d'espace autour des images dans tableau	probléme avec ma page d'index
Problème de regex	Problème avec le commande update de svn sous netBeans
problème avec le xml	Problème de raffraichissement d'élement swing
Probleme de superposition JLabel sur JFrame-avec-Background	Select lié en JS+PHP : problème avec IE
Problème de librairies dynamiques	Eclipse, SVN, EJB (probleme)
Plus de sujets relatifs à : Probleme pour faire sortir mon menu déroulant sur la droite

Page générée en 0.066 secondes