Bonjour,

Je débute en CSS et je suis en train de réaliser un site. J'ai un problème avec un menu. En fait, j'inverse les couleurs du menu lorsqu'on passe dessus avec la souris. Le seul problème c'est que cela marche lorsqu'on survole le texte du menu mais pas le cadre (div).
Du coup, cela est un peu gênant :
Voici le menu en question :
http://site.benoitlaurent.free.fr/testmenu.html

Ou faut il que je rajoute une couleur de texte différente dans mon CSS ?

Voici le code des deux pages [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
 
<head>
<link type="text/css" rel="stylesheet" media="all" href="menus.css" />
</head>
<body>
           <div id="sidebar-left" class="sidebar"><div id="sidebar-left-inner">
          <div id="block-menu_block-1" class="block block-menu_block">
  <h2>Menu</h2>
 
  <div class="content">
    <div class="menu-name-primary-links parent-mlid-0 menu-level-2">
 
  <ul class="menu"><li class="leaf first menu-mlid-159"><a href="#" title="">Le titre du point n1</a></li>
<li class="leaf menu-mlid-275 active active-trail"><a href="#" title="Les origines" class="active-trail active">le n2</a></li>
<li class="leaf menu-mlid-123"><a href="#" title="">L'histoire</a></li>
<li class="leaf last menu-mlid-127"><a href="#" title="Nouvelles des comtés">Les news</a></li>
</ul></div>
  </div>
</div>
        </div></div>
</body>
Et 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
 
 
#block-menu_block-1, #block-menu_block-2 {
  background : #673e2d;
  padding : 10px;
  border : 2px solid #513123;
  font : Helvetica, Verdana, Arial, sans-serif;
  margin-top :10px ;
}
 
#block-menu_block-1 a, #block-menu_block-2 a {
  text-decoration: none;
}
 
#block-menu_block-1 a{
  color: #ceb398;
}
 
#block-menu_block-1 a.active{
  color: #673e2d;
}
 
#block-menu_block-1 h2{
  color: #7b9bd0; 
/*   font-variant : small-caps ;*/
}
 
#block-menu_block-1 li.leaf:hover,
#block-menu_block-1 a:hover {
  background: #ceb398;/* url('images/bg-shade-light-flip.png') repeat-x;*/
  color : #673e2d;
  body : #673e2d;
}
 
#block-menu_block-1 li.leaf, #block-menu_block-1  li.collapsed, #block-menu_block-1  li.expanded {
  background : #673e2d;
}
 
#block-menu_block-1 li.leaf.active {
  background : #ceb398;
}
Cordialement,
Merci
Benoit

EDIT : Merci la solution suivante est la bonne !