Slt
Voilà je ss entrain de créer un menu à partir d'un code source que j'ai récuperé:
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 <dl id="menu"> <dt onclick="javascript:montre();"><a href="#">Menu 1</a></dt> <dt onclick="javascript:montre('smenu2');">Menu 2</dt> <dd id="smenu2"> <ul> <li><a href="#">Sous-Menu 2.1</a></li> <li><a href="#">Sous-Menu 2.2</a></li> <li><a href="#">Sous-Menu 2.3</a></li> </ul> </dd> <dt onclick="javascript:montre('smenu3');">Menu 3</dt> <dd id="smenu3"> <ul> <li><a href="#">Sous-Menu 3.1</a></li> <li><a href="#">Sous-Menu 3.1</a></li> <li><a href="#">Sous-Menu 3.1</a></li> <li><a href="#">Sous-Menu 3.1</a></li> <li><a href="#">Sous-Menu 3.1</a></li> <li><a href="#">Sous-Menu 3.1</a></li> </ul> </dd> <dt onclick="javascript:montre('smenu4');">Menu 4</dt> <dd id="smenu4"> <ul> <li><a href="#">Sous-Menu 4.1</a></li> <li><a href="#">Sous-Menu 4.1</a></li> </ul> </dd> </dl>
Cependant je ne comprend pas quand on clique sur le menu 2 - 3 ou 4 dans le menu du lien, le sous menu apparait bien en dessous mais il est :
1 - Légèrement décalé vers la droite
2 - La police du boutton qui est censé avoir un sous-menu et plus grande que celle qui possède un lien directe
3 - Lorsque l'on actualise ou que l'on arrive sur la page (du lien ci-dessus), les sous-menus n'apparaissent seulement qu'après avoir appuyer dessus or les miens apparaissent directement et ne partent pas.
Voici le code css pour le menu :
Merci d'avance
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 #menu { position: absolute; top: 9em; left: 3em; } #menu { width: 8.5em; } #menu dt { cursor: pointer; margin: 2px 0; height: 20px; line-height: 20px; text-align: center; font-weight: bold; border: 1px solid gray; background-image: url(Fond/boutton.png); } #menu dd { border: 1px solid gray; } #menu li { text-align: left; background: blue; font-size: 0.9em; } #menu li a, #menu dt a { color: yellow; text-decoration: none; display: block; border: 0 none; height: 100%; font-size:0.8em; } #menu li a:hover, #menu dt a:hover { background: #eee; }![]()
Partager