pb sous menu qui reste ouvert quand je déplace la souris

**mouna201** · 14/02/2007, 09h59

salut à tous.
j'ai un menu déroulant qui affiche des sous menus. cependant, lorsque je pointe avec la souris sur un menu, et que j'éloigne la souris, ce dernier reste ouvert. y a t il un script qui me permettrai de fermer le sous menu une fois que la souris est éloignée: onmouseout
merci

**maximew** · 14/02/2007, 10h03

peux tu donner la source actuelle de ton menu.

merci

**mouna201** · 14/02/2007, 10h12

ok, c'est en effet un menu horizontal.
voici tout d'abord le css

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
<STYLE type=text/css>
BODY {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: white; PADDING-BOTTOM: 0px; MARGIN: 0px; FONT: 80% verdana, arial, sans-serif; PADDING-TOP: 0px
}
DL {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
DT {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
DD {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
UL {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
LI {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
#menu {
	Z-INDEX: 100;
	LEFT: auto;
	WIDTH: 900px;
	POSITION: absolute;
	TOP: 491px;
	height: 20;
}
#menu DL {
	FLOAT: left; WIDTH: 11em}
#menu DT {
	BORDER-RIGHT: gray 1px solid; BORDER-TOP: gray 1px solid; FONT-WEIGHT: bold; BACKGROUND: url(fond4.png); MARGIN: 1px; BORDER-LEFT: gray 1px solid; CURSOR: pointer; BORDER-BOTTOM: gray 1px solid; TEXT-ALIGN: center
}
#menu DD {
	BORDER-RIGHT: gray 1px solid; BORDER-TOP: gray 1px solid; DISPLAY: none; BORDER-LEFT: gray 1px solid; BORDER-BOTTOM: gray 1px solid
}
#menu LI {
	BACKGROUND: url(fond4.png); TEXT-ALIGN: left
}
#menu LI A {
	BORDER-RIGHT: 0px; BORDER-TOP: 0px; DISPLAY: block; BORDER-LEFT: 0px; COLOR: #FFFFFF; BORDER-BOTTOM: 0px; HEIGHT: 100%; TEXT-DECORATION: none
}
#menu DT A {
	BORDER-RIGHT: 0px; BORDER-TOP: 0px; DISPLAY: block; BORDER-LEFT: 0px; COLOR: #FFFFFF; BORDER-BOTTOM: 0px; HEIGHT: 100%; TEXT-DECORATION: none
}
#menu LI A:hover {
	BACKGROUND: #99CCFF
}
#menu DT A:hover {
	background-image: url(fond4.png);
}
.mentions {
	LEFT: 10px; COLOR: #000; POSITION: absolute; TOP: 300px; BACKGROUND-COLOR: #ddd
}
.Style1 {color: #FFFFFF}
</STYLE>

le code html pour le menu et les sous menus:

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
<DIV id=menu>
 
<DL>
  <DT class="Style1" onmouseover="javascript:montre('smenu1');">Groupe </DT>
  <DD id=smenu1>
  <UL>
    <LI><A href="presentation.html">Présentation </A> 
    <LI><A href="historique.html">Historique </A> 
		 <LI><A href="humaines.html">Ressources humaines </A> 
   </LI></UL></DD></DL>
 
<DL>
  <DT class="Style1" onmouseover="javascript:montre('smenu2');">Activit&eacute; </DT>
  <DD id=smenu2>
  <UL>
     <LI><A href="clients.html">Clients </A> 
	<LI> <a href="revendeur.html">Revendeurs</A> 
	<LI><A href="ventes.html">Ventes </A>
	  <LI><A href="presence.html">Présence nationale </A>
		<LI><A href="financieres.html">Informations financières </A>
   </LI></UL></DD></DL>
</DIV>

et enfin, le script qui permet de dérouler le menu:

Code :

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

1
2
3
4
5
6
7
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';}
}

**mouna201** · 14/02/2007, 10h29

voici la page html en piece jointe, pour que vous voyez ce que ça donne.

**E.Bzz** · 14/02/2007, 10h31

Bonjour,

Code :

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

1
2
3
function cache(id) { 
document.getElementById(id).style.display="none";
}

à appeler sur le onmouseout de chaque menu ...

a+

**mouna201** · 14/02/2007, 10h40

merci je vais l essayer

**mouna201** · 14/02/2007, 10h48

MERCI BEAUCOUP, ça fonctionne

**mouna201** · 14/02/2007, 11h33

eyh pardon, ça ne fonctionne pas vraiment.
j'ai associé l action a l'evenement: onmouseout, mais le probleme c'est que le sous menu ne s'affiche pas. j'associe l'action à quel evenement à votre avi?