Bonjour,

n'en déplaise à certains, je ne me sens pas capable de développer moi-même un menu ; donc j'en ai pris un qui me convient dans la galerie CSS et le modifie pour l'adapter à mon besoin (http://css.developpez.com/galerie/?p...orizontaux#MH1 ). Mais si, tout seul, il fonctionne bien, si je l'intègre dans mon appli, ce n'est plus le cas. Il est évident qu'il y a un effet de bord, mais la conception est trop complexe pour la présenter (et même pour faire un codepen). Aussi, je préfère mieux comprendre la conception du menu afin de détecter moi-même l'effet de bord et trouver la solution. Pour cela, je souhaite obtenir certains éclaircissements. Comme je pense que le souci vient du CSS, mes questions sont sur le CSS. En gros, il y a 3 propriétés sur lesquelles j'ai rajouté le commentaire /* pourquoi ? */

http://codepen.io/laurentsc/pen/KrBBvX

Code html : 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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head>
	<title>Menu horizontal déroulant</title>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<link rel="stylesheet" href="style.css" type="text/css" />
	 <link href="css/style-menu_images.css" rel="stylesheet"/> 
	<script type="text/javascript" src="menu.js"></script>
</head>
<body><div id="centrer">
 
 
<div id="menu">
 
	<ul>
 
		<li onmouseover="montre('smenu5',true);" onmouseout="montre('smenu5',false);">Menu 5
			<ul id="smenu5">
				<li onmouseover="montre('smenu51',true);" onmouseout="montre('smenu51',false);"><a href="#">smenu51</a>
					<ul  id="smenu51">
						<li><a href="#">smenu511</a></li>
						<li><a href="#">smenu512</a></li>
						<li><a href="#">smenu513</a></li>
 
					</ul>
				</li>
				<li onmouseover="montre('smenu52',true);" onmouseout="montre('smenu52',false);"><a href="#">smenu52</a>
					<ul  id="smenu52">
						<li><a href="#">smenu521</a></li>
						<li><a href="#">smenu522</a></li>
						<li><a href="#">smenu523</a></li>
 
					</ul>
				</li>
				<li onmouseover="montre('smenu53',true);" onmouseout="montre('smenu53',false);"><a href="#">smenu53</a>
					<ul  id="smenu53">
						<li><a href="#">smenu531</a></li>
						<li><a href="#">smenu532</a></li>
						<li><a href="#">smenu533</a></li>
 
					</ul>
				</li>
			</ul>
		</li>
 
		<li onmouseover="montre('smenu4',true);" onmouseout="montre('smenu4',false);"><a href="#">smenu4</a>
			<ul id="smenu4">
			<li>
			<FORM  action="#" method="POST">
				<select name="stats" size=3>
 
				 <option> option 1 </option>
				 <option> option 2 </option>
				 <option> option 3 </option>
 
				</select>	
				<input type="submit" value="OK">
				</FORM>
			</li>
			</ul>
		</li>
 
		<li class=" item_menu_border home position"><a class="height-medium" href="#"  ><span class="centered">accueil</span></a></li>
	</ul>	
</div>	
</div>		
</body>
</html>

Code css : 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
* { /* L'étoile sert à désigner tous les éléments d'une page en même temps */
margin:0px;
padding:0px;
background:#ffffff;
text-align:center;
}
 
body{
font-family:Arial, Helvetica, sans-serif;
}
 
img {
border:none;
}
 
a {  
color:#000000;
text-decoration:none;
text-transform:none;
}
 
/*centre la page et donne la largeur pour une basse résolution*/
#centrer {
margin-left:auto;
margin-right:auto;
width:776px;
}
 
/****************************/
/* 	début menu	déroulant	*/
/****************************/
ul, li {
list-style-type:none;
}
 
/*chaque sous-menu*/
#menu ul li {
position:relative;/* pourquoi ? */
float:right;/* pourquoi ? */
width:125px;
cursor:pointer;
/*display:block;*/
/*background:none;*/
height:92px;
}
 
/*carré déroulant sous un sous-menu niveau 1*/
#menu ul li ul {
display:none;
position:absolute;/* pourquoi ? */
width:125px;
border:1px solid #dddddd;
border-top:none;
top:22px;
left:0;
}
 
#menu ul li ul li {
height:100%;
}
 
 
#menu ul li ul li a {
color:#3399ff;
font-size:11px;
font-weight:normal;
display:block;
height:100%;
border-top:1px solid #dddddd;
}
 
 
/*décalage des sous-menu niveau 2 vers la droite*/
#menu ul li ul li ul {
top:0px;
left:125px;
}

Code js : 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
//au chargement de la page, on appelle la fonction montre()
window.onload=montre;
 
//affichage du menu déroulant et placement de ce dernier
function montre(id,affiche)
{
	var d = document.getElementById(id);
	//si on quitte un élément du menu
	if (d && !affiche) 
	{
		d.style.display='none'; //on l'efface
 
	}
	//sinon si on se mets sur un élément du menu
	else if (d && affiche)
	{ 
		d.style.display='block'; //on l'affiche
 
	}
}