voila je me suis renseigné sur le net pour un menu déroulant en css. J'ai trouvé et essayé de l'appliquer à mon site. J'ai du faire une erreur quelque part car ca ne marche pas.
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
69
70
71
72
73
74
75
76
77
78 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" > <head> <title>Jour J</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="design_emeline4.css" /> <script type="text/javascript" src="menu.js"></script> <script language="JavaScript" src="mm_menu.js"></script> </head> <body> <!-- fond --> <div id="rubrique"> <div> <img src="image/emeline_rub.jpg" style="float: left"> <ul id="menuderoulant"> <li> <a href="emelinepresentation.html"><img src="image/presentation_rub_off.jpg" style="float: left" alt="image/presentation_rub_on.jpg" class="rollOver" /></a> <ul class="sousmenu"> <li><a href="lesmariees.html">Les mariées</a></li> <li><a href="lesparents.html">Les parents des mariées</a></li> <li><a href="lesfrangins.html">les frangins et frangines</a></li> <li><a href="lestemoins.html">Les témoins</a></li> </ul> <img src="image/oiseau1_rub.jpg" style="float: left"> <li> <a href="emelinejourj.html"><img src="image/jourj_rub_off.jpg" alt="image/jourj_rub_on.jpg" style="float: left" class="rollOver" /></a> <ul class="sousmenu"> <li><a href="lesmariees.html">Les mariées</a></li> <li><a href="lesparents.html">Les parents des mariées</a></li> <li><a href="lesfrangins.html">les frangins et frangines</a></li> <li><a href="lestemoins.html">Les témoins</a></li> </ul> </li> <img src="image/oiseau2_rub.jpg" style="float: left"> <li> <a href="infospratiques.html"><img src="image/infospratiques_rub_off.jpg" alt="image/infospratiques_rub_on.jpg" style="float: left" class="rollOver" /></a> <ul class="sousmenu"> <li><a href="lesmariees.html">Les mariées</a></li> <li><a href="lesparents.html">Les parents des mariées</a></li> <li><a href="lesfrangins.html">les frangins et frangines</a></li> <li><a href="lestemoins.html">Les témoins</a></li> </ul> </li> <img src="image/oiseau3_rub.jpg" style="float: left"> <a href="contact.html"><img src="image/contact_rub_off.jpg" alt="image/contact_rub_on.jpg" class="rollOver" style="float: left" /></a> <img src="image/oiseau4_rub.jpg" style="float: left"> </ul> </li> </div> <div> </div> <script type="text/javascript"> var imgs = document.getElementsByTagName('img'); for (var i = 0; i < imgs.length; i++) { if (imgs[i].className == 'rollOver') { imgs[i].onmouseover = (function() { var a = this.src; this.src = this.alt; this.alt = a; }); imgs[i].onmouseout = (function() { var a = this.src; this.src = this.alt; this.alt = a; }); imgs[i].className = ''; } } </script> </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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107 body { background-color: #FBE3DE; } img { border:0; } #unite { width: 980px; height: 542px; margin: auto; background-image : url("image/fond_emeline.jpg"); background-repeat: no-repeat; border :2px solid black; } #rubrique { width: 980px; height: 542px; margin: auto; background-image : url("image/fond_rubrique.jpg"); background-repeat: no-repeat; border :2px solid black; } .menu { width: 980px; height: 126px; } .en_tete { width: 980px; height: 173px; } .bas_page { width: 980px; height: 243px; } /* pour le menu deroulant */ #menuderoulant { width: 644px; list-style-type: none; margin: 0; padding: 0; border: 0; } #menuderoulant li { float: left; margin: 0; padding: 0; border: 0; } #menuderoulant .sousmenu { list-style-type: none; margin: 0; padding: 0; border: 0;background: yellow; } #menuderoulant .sousmenu li { margin: 0; padding: 0; border: 0; } #menuDeroulant li a:link, #menuDeroulant li a:visited { display: block; height: 1%; color: #FFF; background: #3B4E77; margin: 0; padding: 4px 8px; border-right: 1px solid #fff; text-decoration: none; } #menuDeroulant li a:hover { background-color: #F2462E; } #menuDeroulant li a:active { background-color: #5F879D; } #menuDeroulant .sousMenu li a:link, #menuDeroulant .sousMenu li a:visited { display: block; color: #FFF; margin: 0; border: 0; text-decoration: none; } #menuDeroulant .sousMenu li a:hover { background-image: none; background-color: #F2462E; }
et voici la page
http://www.sandrineetgwen.fr/emelinejourj.html
Merci de votre aide car je bloque depuis hier soir sur se menu déroulant
Partager