Menu horizontal à base de CSS
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 :
http://img682.imageshack.us/img682/5552/42118525.png
lorsque la souris est sur un des sous items de catalogue :
http://img193.imageshack.us/img193/9295/57381013.png
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 :roll:.
le code HTML :
Code:
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:
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 ?
