Menu déroulant JS et CSS

**dlamo** · 20/07/2007, 10h19

Bonjour à tous,
Voici mon soucis :
J'ai un menu JS et CSS qui fonctionne parfaitement tant que la taille des polices dans les onglets (dt) est la même que celle dans le liens déroulant (li)....Mais comme j'ai besoin de réduire celle des liens déroulants, alors là le menu ne fonctionne plus correctement : il ouvre bien les choix dessous, mais impossible d'y aller cliquer, ça se referme aussitôt ...
Quelqu'un a t-il une idée ? (important : optimisation uniquement pour IE5.5 et 6 pour des raisons des gestion interne à la société.... Oui je sais ! .... )
Voici la partie du JS + 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
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<script type="text/javascript">
<!-- script du menu déroulant
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</script>
<!-- début tableau contenant menu déroulant -->
<style type="text/css">
<!--
@import url("css/menu_deroulant.css");
-->
</style>
 
<table width="100%" height="50" border="0" cellpadding="0" cellspacing="0" bgcolor="#FF3399">
  <tr>
    <td width="80%" nowrap>
<div id="menu_der">
   <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr align="center">
		  <td nowrap>
				<dl>			
					<dt class="comite" onMouseOver="javascript:montre('smenu1');"><a href="#">Découvrir le CE</a></dt>
						<dd  class="comite" id="smenu1" onMouseOver="javascript:montre('smenu1');" onMouseOut="javascript:montre('');">
							<ul>
								<li><a href="role.php">&nbsp;Le rôle du CE</a></li>
								<li><a href="specificites.php">&nbsp;Ses spécificités</a></li>
								<li><a href="elections.php">&nbsp;Les élections</a></li>
								<li><a href="seances.php">&nbsp;Séances plénières</a></li>
								<li><a href="equipe.php">&nbsp;Notre équipe</a></li>
							</ul>
						</dd>
				</dl>
				<dl>	
					<dt class="offres" onMouseOver="javascript:montre('smenu2');"><a href="#">Nos offres</a></dt>
						<dd  class="offres" id="smenu2" onMouseOver="javascript:montre('smenu2');" onMouseOut="javascript:montre('');">
								<ul>
									<li><a href="role.php">&nbsp;Nos partenaires</a></li>
									<li><a href="specificites.php">&nbsp;La billetterie</a></li>
									<li><a href="elections.php">&nbsp;Les annoces</a></li>
								</ul>
				  </dd>
				</dl>
				<dl>	
					<dt class="formulaires" onMouseOver="javascript:montre('smenu6');"><a href="#">Les formulaires</a></dt>
						<dd class="formulaires" id="smenu6" onMouseOver="javascript:montre('smenu6');" onMouseOut="javascript:montre('');">
							<ul>
								<li><a href="sport.php">&nbsp;sports</a></li>
								<li><a href="creche.php">&nbsp;Crêche</a></li>
								<li><a href="balneo.php">&nbsp;Balnéothérapie</a></li>
								<li><a href="enfants.php">&nbsp;Enfants</a></li>
								<li><a href="prets.php">&nbsp;Prêts</a></li>
							</ul>
						</dd>
				</dl>
				<dl>	
					<dt class="activites" onMouseOver="javascript:montre('smenu7');" ><a href="#">Voir nos activités</a></dt>
						<dd class="activites" id="smenu7" onMouseOver="javascript:montre('smenu7');" onMouseout="javascript:montre('')";>
							<ul>
								<li><a href="budget.php">&nbsp;Budget</a></li>
								<li><a href="camping.php">&nbsp;Camping</a></li>
								<li><a href="cerebral.php">&nbsp;Cérabral club</a></li>
								<li><a href="chasse.php">&nbsp;Chasse</a></li>
								<li><a href="cinema.php">&nbsp;Chèques cinéma</a></li>
								<li><a href="culture.php">&nbsp;Culture</a></li>
								<li><a href="dessins.php">&nbsp;Dessins Noël</a></li>
								<li><a href="enfants.php">&nbsp;Enfants</a></li>
								<li><a href="fete_meres.php">&nbsp;Fêtes des mères</a></li>
								<li><a href="fin_annee.php">&nbsp;Fin d'année</a></li>
								<li><a href="participation.php">&nbsp;Part. financière</a></li>
								<li><a href="prets.php">&nbsp;Prêts</a></li>
								<li><a href="section_autonome.php">&nbsp;Sect. autonome</a></li>
								<li><a href="serrechevalier.php">&nbsp;Serre Chevalier</a></li>
								<li><a href="socios.php">&nbsp;Socios</a></li>
								<li><a href="soirees.php">&nbsp;Soirées</a></li>
								<li><a href="sporting.php">&nbsp;Sporting club</a></li>
								<li><a href="vac_ete.php">&nbsp;Vacances été</a></li>
								<li><a href="vac_hiver.php">&nbsp;Vacances hiver</a></li>
								<li><a href="voyages.php">&nbsp;Voyages</a></li>
								<li><a href="weekend.php">&nbsp;Week ends</a></li>
							</ul>
					  </dd>
				</dl>			
			</td>
     	</tr>
   </table>
 </div>
<div align="left"></div></td>
    <td rowspan="2" nowrap><?php include "retrouveznous.inc.php" ?></td>
  </tr>
  <tr>
    <td nowrap>&nbsp;</td>
  </tr>
</table>

**Bisûnûrs** · 20/07/2007, 10h42

Problème récurent de l'utilisation de ce menu. Je ne peux que te conseiller de regarder les menus disponibles à cette adresse, voir si tu y trouves ton bonheur :

http://css.developpez.com/galerie/

Et pour te former : Cours et tutoriels CSS et FAQ CSS.

**dlamo** · 20/07/2007, 10h48

Merci, je vais voir ça
Ceci dit, j'ai trouvé une piste, rien à voir avec ce pauvre js... ça vient de la hauteur de
#menu_der li a {
height:15px;
}
ça fonctionne si je supprime la hauteur mais là mon menu se déroule jusqu'en bas de page.... je dois réfléchir.... lol
Merci encore pour le lien

**Bisûnûrs** · 20/07/2007, 13h16

Dans ton CSS tu as mis :

Code css :

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

1
2
3
4
5
6
7
8
9
#smenu4 ul li ul {
display:none;
position:absolute;
width:125px;
border:1px solid #dddddd;
border-top:none;
top:22px;
left:0;
}

Ce n'est pas #smenu4 mais #menu qu'il faut mettre.

**dlamo** · 20/07/2007, 13h33

Merci pour ton aide et pardon d'avoir supprimé mon dernier message, mais j'ai fais un post spécial dans la rubrique css....
(sinon, j'ai mis #smenu4 pour ne modifier la couleur que de celui là, mais j'ai modifier, ça fonctionne correctement pour mes couleurs, le soucis est dans le placement du menu dans la page, j'arrive pas à le mettre à gauche, cf mon nouveau post

Menu déroulant JS et CSS

JavaScript

Discussions similaires

Partager

Partager