Bonjour à tous,
mes excuses d'avance pour mon vocabulaire, je suis débutant.
Je cherche à faire un menu déroulant sur mon site, et j'ai trouvé (ici) un joli exemple, avec CSS et JS.
Ca fonctionne très bien. En résumé, un peu de CSS pour le menu lui-même, et un peu de Javascript pour le montrer ou le cacher.
Bon, là où ça se gâte, c'est au niveau du positionnement du menu.
Je suis obligé de le positionner en absolute (parce que je veux qu'il s'affiche au-dessus de tout le reste, bien sûr !), donc ça donne ça :
#sous-menu1 {
display: None;
margin: 0;
padding : 0;
position : absolute;
top : 155px;
left : 300px; width : auto;
list-style-image: url(Aucune);
cursor: hand;
background-color: #D80001;
float: left;
overflow: visible;
height: auto;}
Et c'est super en 800x600.
Mais à d'autres résolutions, 1024 ou 1280, ça ne va plus du tout parce que le menu est toujours positionné à 300 pixels du bord gauche, mais ma page est centrée, et se déplace.
Donc, en clair, je cherche une solution pour que le menu "suive" l'image qui permet d'ouvrir le menu.
C'est certainement très simple, j'imagine trois solutions :
- il faut pouvoir indiquer à mon menu (cf. CSS ci-dessus qu'il doit se positionner relativement à la table qui constitue le site, et non plus par rapport au bord de la page,
- ou bien se positionner par rapport au centre de la page,
- ou bien (solution merdique, sûrement) calculer le décallage en fonction de la résolution du navigateur.
Bref, comme vous le voyez, je suis vraiment perdu, presqu'au bord du suicide...
Alors toutes vos réponses sont les bienvenues (y compris si vous me proposez une autre solution pas trop compliquée et qui marcherait pour tous les navigateurs).
Merci d'avance,
JPhi