[newbie en CSS] Prob image disparait au rollover !
Bonjour (j'essaie le CSS car c'est pas mal du tout mais j'ai un prob)
J'ai un menu horizontal qui comporte des sous-menus qui s'affiche au rollover mais j'aimerais que lorsque l'on passe sur le menu il affiche les sous-menus et que l'image du menu fasse aussi un rollover. Je voudrais que lorsqu'on passe sur l'image du menu, cette dernière change et fasse apparaitre les sous-menus. Mon prob est que l'image disparait lorsque je passe dessus ! (si je ne mets pas l'image dans le menu, le rollover de cette dernière fonctionne sans prob, c'est uniquement lorsque je la met dans le menu qu'elle disparait ! Voici le code CSS :
Code:
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
| /* CSS du menu horizontal, bieler batiste */
.menu{
position:absolute;
display:block;
margin:0;
padding:0;
width:500px;
}
.menu ul{
position:absolute;
display:block;
width:124px;
/*margin:0;*/
padding:0;
}
.menu li ul{
visibility:hidden;
}
.menu li li ul{
position:absolute;
margin-left:124px;
margin-top:-23px;
}
.menu li{
list-style:none;
width:124px;
height:auto;
display:inline;
display/**/:block;
float:none;
float/**/:left;
margin:0;
padding:0;
}
.menu li li{
display:block;
float:none;
}
/* correct a little IE bug */
* html .menu li li{
display:inline;
}
.menu a{
text-align:center;
background-color: #9cf;
border:0px #666 solid;
color:#000;
display:block;
width:120px;
text-decoration:none;
padding:2px 0;
margin:0px;
}
.menu a:hover{
background-color: #eee;
border:0px #aaa solid;
}
/* for a mozilla better display with key nav */
.menu a:focus{
background-color: #aaf;
}
a.linkOver{
background-color: #eee;
}
a.image { /* définition de la classe "image" de la balise <a> */
display: block; /* la balise a doit être en bloc */
width: 100px; /* largeur de l'image réactive */
height: 100px; /* hauteur de l'image réactive */
background-image: url(home.jpg); /* source de l'image de départ */
background-repeat: no-repeat;
}
a.image:hover { /* définition de la classe "image" de la balise <a> au survol */
background-image: url(home2.jpg); /* source de l'image d'arrivée */
} |
et voici le code de ma page :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| ...
<ul id="menu">
<li><a class="image" title="desc" href="lien.htm"></a>
<ul>
<li><a href="#">élément 1</a></li>
<li><a href="#">élément 2</a>
<ul>
<li><a href="#">élément 1</a></li>
<li><a href="#">élément 2</a></li>
<li><a href="#">élément 3</a>
<ul>
... |
J'ai repris le code mais c'est pas facile. A coté j'ai un fichier javascript mais il est pas important pour mon problème.
Merci beaucoup de vos réponses !
