[DEBUTANT] Problème surbrillance en survolant menu

**lauben** · 18/12/2009, 14h11

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 !

**te-san** · 18/12/2009, 20h26

hello Lauben.

Pour faire cela, il faut lié le li et le a, ou le mettre dans un même block, tu vois ou je veux en venir ? ^^

test avec ce bout de code supplémentaire dans le css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
li a{
display : block;
}

**O-Zone** · 21/12/2009, 15h39

Remplace :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
#block-menu_block-1 li.leaf:hover,
#block-menu_block-1 a:hover {

par

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
#block-menu_block-1 li.leaf:hover, #block-menu_block-1 li.leaf:hover a,
#block-menu_block-1 a:hover {

Pas sur que tout cela marche sous IE (le :hover sur autre chose qu'un <a>)

[DEBUTANT] Problème surbrillance en survolant menu

CSS

Vue hybride

Discussions similaires

Partager

Partager