Bonjour à tous,

Je suis en train de faire un menu horizontal déroulant à base d'image et de CSS.

voila le rendu :

lorsque la souris est sur catalogue :


lorsque la souris est sur un des sous items de catalogue :


Mon problème est que lorsque la souris est sur un des sous items (cas de l'image 2), je voudrais que l'image reste sur "Catalogue" comme pour la première image. Je me demande si c'est possible avec des CSS .

le code HTML :
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
<div id="menu">
<ul>
  <li><a href="../index.php">Accueil</a></li>
 
  <li><a  rel="dropmenu1" href="../toutesLesOffres.php">Catalogue</a>
  <ul>
      <li><a href="#t">Sous-item 1</a></li>
      <li><a href="#">Sous-item 2</a></li>
      <li><a href="#">Sous-item 3</a></li>
    </ul>
 
  </li>
 
  <li><a href="../monEspace.php">MON ESPACE</a></li>
 
  <li><a   href="../Communaute/index.php">COMMUNAUTE</a></li>    
 
  <li><a href="../forum/index.php">Forum</a></li>
 
  <li><a href="../faq.php">FAQ</a></li>
</ul>
</div>
le CSS :
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
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
#menu ul {
 margin:0;
 padding:0;
 list-style-type:none;
 text-align:center;
 }
 
 
#menu li {
 float:left;
 margin:auto;
 padding:0;
 color: #FFFFFF;
 }
 
 
 
#menu li a {
	background-image: url(images/menuFond.png);
	background-position: center bottom;
	clear:none;
	width: 130px;
	height:26;
	display:block;
	color: #257708;
	text-decoration: none;
	text-transform: uppercase;
	clip: rect(auto,auto,auto,auto);
	text-align: center;
	font-size: 18px;
	padding-top: 9px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 20px;
	font-weight: bold;
}
 
 
#menu li a:hover {
	background-image: url(images/boutonVert.png);
	background-repeat: no-repeat;
	color: #FFFFFF;
}
 
#menu ul li ul {
 display:none;
}
 
#menu ul li:hover ul {
 display:block;
 }
#menu li:hover ul li {
 float:none;
}
 
#menu ul li ul li a {
background-image:none;
color:#000;
background-color:#090;
font-size: 12px;
}
#menu ul li ul li a:hover {
background-image:none;
color:#FFF;
}
 
#menu li ul {
 position:absolute;
}
Quelqu'un à une idée ?