Bonjour à tous,
J'ai avancé depuis mon premier post sur ce forum.
Mon menu fonctionne et quand on clique sur un élément du menu ou des sous-menus, le libellé apparait bien dans la cellule de tableau située sous le menu. Et, s'il y a un sous-menu, celui-ci est caché pour que la cellule ne soit pas masquée.
Ces opérations sont effectuées par la fonction suivante :Cette fonction est appelée par le code html qui suit
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 function liClic(id, cell) { document.getElementById(cell).innerHTML=id.innerHTML; document.getElementById(cell).style.visibility = "visible"; document.getElementById(cell).className = "bordure"; var ulVal = getAncestorByTagName(id, 'ul'); if (ulVal.id != "css3menu1") // différent de (<>) ou Not se code != { if (ulVal.display =="none" || ulVal.display =="") { ulVal.style.display = "block" } else { ulVal.style.display = "none" } } }Mais une fois le sous-menu caché, il n'apparait plus au survol par la souris de l'élément parent du menu.
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 <ul id="css3menu1" class="topmenu"> <li><a onclick="liClic(this,'MusClasCell')" class="toproot"><span>la musique classique</span></a> <ul id="MusClassUl"> <li><a onclick="liClic(this,'MusClasCell')">symphonique</a></li> <li><a onclick="liClic(this,'MusClasCell')">concertiste</a></li> <li><a onclick="liClic(this,'MusClasCell')">baroque</a></li> </ul> </li> <li><a onclick="liClic(this,'MusExoCell')" class="toproot"><span>la musique exotique</span></a> <ul id="MusExoUl"> <li><a onclick="liClic(this,'MusExoCell')">hispano</a></li> <li><a onclick="liClic(this,'MusExoCell')">afro</a></li> </ul> </li> <li><a onclick="liClic(this,'CineCell')" class="topmenu">le cinéma</a></li> <li><a onclick="liClic(this,'ChansonCell')" class="toproot"><span>la chanson</span></a> <ul id="ChansonUl"> <li><a onclick="liClic(this,'ChansonCell')">française</a></li> <li><a onclick="liClic(this,'ChansonCell')">anglo-saxonne</a></li> </ul> </li> <li><a onclick="liClic(this,'DanseCell')" class="toproot"><span>la danse</span></a> <ul id="DanseUl"> <li><a onclick="liClic(this,'DanseCell')">rock</a></li> <li><a onclick="liClic(this,'DanseCell')">sud américaine</a></li> </ul> </li> <li><a onclick="liClic(this,'InstrumCell')" class="toproot"><span>les insruments</span></a> <ul id="InstrumUl"> <li><a onclick="liClic(this,'InstrumCell')">à vent</a></li> <li><a onclick="liClic(this,'InstrumCell')"><span>à cordes</span></a> <ul id="CordesUl"> <li onclick="liClic(this,'InstrumCell')"><a>pincées</a></li> <li><a onclick="liClic(this,'InstrumCell')">frottées</a></li> </ul> <li> </li> <li><a onclick="liClic(this,'InstrumCell')"><span>les percussions</span></a> <ul id="PercusUl"> <li><a onclick="liClic(this, 'InstrumCell')">famille des pianos</a></li> <li><a onclick="liClic(this, 'InstrumCell')">batterie</a></li> <li><a onclick="liClic(this, 'InstrumCell')">autres</a></li> </ul> </li> </ul> </li> <li><a onclick="liClic(this, 'HitsCell')" class="topmenu">les hits</a></li> <li><a onclick="liClic(this, 'StyleCell')" class="topmenu">les styles</a></li> <li><a onclick="liClic(this, 'GrandsNomsCell')" class="topmenu">les grands noms</a></li> </ul>
Ma question est de savoir comment réactiver le Hover de la feuille CSS.
CSS :
Merci d'avance pour toute aide
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 table { } .sansbordure { border : 0px; } .bordure { border:4px #3e4388; border-style: ridge; background-color : #99ccff; } ul#css3menu1,ul#css3menu1 ul{ margin:0;list-style:none;padding:0;background-color:;border-width:0;border-style:solid;border-color:;} ul#css3menu1 ul { display:none;position:absolute;left:0;top:100%;background-color:#47515B;border-radius:0 0 10px 10px;-moz-border-radius:0 0 10px 10px; -webkit-border-radius:0;-webkit-border-bottom-right-radius:10px;-webkit-border-bottom-left-radius:10px;padding:0 0 10px; } ul#css3menu1 li:hover>*{ display:block;} ul#css3menu1 li{ position:relative;display:block;white-space:nowrap;font-size:0;float:left;} ul#css3menu1 li:hover{ z-index:1;} ul#css3menu1 ul ul{ position:absolute;left:100%;top:0;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;padding:10px 10px 20px;} ul#css3menu1{ font-size:0;z-index:999;position:relative;display:inline-block;zoom:1;padding:10px 10px 10px 0;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px; *display:inline;} * html ul#css3menu1 li a{ display:inline-block;} ul#css3menu1>li{ margin:0 0 0 10px;} ul#css3menu1 ul>li{ margin:10px 0 0;} ul#css3menu1 a:active, ul#css3menu1 a:focus{ outline-style:none;} ul#css3menu1 a{ display:block;vertical-align:middle;text-align:left;text-decoration:none;font:16px Arial,sans-serif;color:#CBCFDB;cursor:default;padding:3px;background-color:#3e4388;background-repeat:repeat;border-width:0px;border-style:none;border-color:;} ul#css3menu1 ul li{ float:none;margin:0;} ul#css3menu1 ul a{ text-align:left;padding:4px;background-color:#47515B;border-width:0 0 1px 0;border-style:solid;border-color:#3B444C;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;font:13px Arial,sans-serif;color:#CBCFDB;text-decoration:none;} ul#css3menu1 li:hover>a,ul#css3menu1 li a.pressed{ background-color:#686fca;border-style:none;color:#FFFFFF;text-decoration:none;} ul#css3menu1 span{ display:block;overflow:visible;background-image:url("../img/arrowmain0.gif");background-position:right center;background-repeat:no-repeat;padding-right:17px;} ul#css3menu1 li:hover>a>span{ background-image:url("../img/arrowmain1.gif");} ul#css3menu1 ul span{ background-image:url("../img/arrowsub.png");padding-right:12px;} ul#css3menu1 ul li:hover > a span{ background-image:url("../img/arrowsub.png");} ul#css3menu1 ul li:hover>a,ul#css3menu1 ul li a.pressed{ background-color:#333A41;border-style:solid;border-color:#616D8E;color:#FFFFFF;text-decoration:none;} ul#css3menu1 ul ul li{ margin:10px 0 0;} ul#css3menu1>li>a{ padding:3px 10px;} ul#css3menu1 li.toproot>a{ border-width:0 0 3px 0;border-style:none;border-color:#3e4388;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;padding:3px 10px;} ul#css3menu1 li.toproot:hover>a,ul#css3menu1 li.toproot a.pressed{ border-style:solid;border-color:#686fca;border-radius:10px 10px 0 0;-moz-border-radius:10px 10px 0 0;-webkit-border-radius:10px;-webkit-border-bottom-right-radius:0;-webkit-border-bottom-left-radius:0;} ul#css3menu1 li.toproot:click>a,ul#css3menu1 li.toproot a.pressed{display:none} ul#css3menu1 li.topmenu>a{ border-width:0 0 3px 0;border-style:none;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;padding:3px 10px;} ul#css3menu1 li.topmenu:hover>a,ul#css3menu1 li.topmenu a.pressed{ border-style:none;} body { overflow:hidden; /* needed to eliminate scrollbars caused by the background image */ padding:0; margin:0; /* necesarry for the raster to fill the screen */ height:100%;width:100%; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; color: #99CCFF; } #bgimg { position:absolute; z-index: -1; } #realBody { position:absolute; z-index: 5; /* Place the new body above the background image */ overflow:auto; /* restore scrollbars for the content */ height:100%;width:100%; /* Make the new body fill the screen */
Partager