Comment en hover prendre une case entière ?

.menu li a:hover, #menu li a:focus, #menu li a:active
{
background-image:url(fond.gif);
text-decoration: none ;
display:block;
} 

j'ai déjà essayé la fonction display:block; mais ça n'a rien changé :(

.menu li {
background-image:url(fond.gif);
}

.menu a:hover, #menu a:focus, #menu a:active
{
text-decoration: none ;
display:block;
} 

essayes comme çà

En .menu li j'ai déjà un background-image qui est celui du fond permanent des boutons. J'ai quand même testé en rajoutant l'autre, celui du hover mains ça ne change rien.

met le code html et explique a quoi dois resembler la liste

si il y a du code pour ul tu met aussi

J'ai mis des background-image mais cela pourrait être des background-color. J'ai testé cela ne change rien.

Voilà le code html :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>titre</title>
<script type="text/javascript">AC_FL_RunContent = 0;</script>
<script src="../AC_RunActiveContent.js" language="javascript"></script>
<link rel="stylesheet" media="screen" type="text/css" title="design" href="design11.css"/>

</head>

<body>
<div class="titre">
<h1>gros titre</h1>
<h2>petit titre</h2><br>
</div>
<div class="contenu">
<div class="menu">
<ul>
<li class="logo_menu2"><img src="logo_menu2.jpg" /></li>
<li><a href="#" title="111 111111111">111 11111111</a></li>
<li><a href="#" title="222 22222 22 222">222 22222 22 222</a></li>
<li><a href="#" title="33333">33333</a></li>
<li><a href="#" title="444444444444">444444444444</a></li>
<li><a href="#" title="5555555 5555555555">5555555 5555555555</a></li>
<li><a href="#" title="66 666666">66 666666</a></li>
<li><a href="#" title="7777777777">7777777777</a></li>
<li><a href="#" title="8888888">8888888</a></li>
</ul>
</div>

</div>
</body>
</html>

et le css :

.titre
{
font-family:"Times New Roman", "Arial Black", Arial, Verdana, serif;
text-align:center;
width:1100px;
margin:auto;
}

.contenu
{
width: 1100px;
margin:auto;
}

.menu
{
margin-left:10%;
}

.menu li
{
float: left ;
border: 1px solid #000000 ;
background-image:url(degrade_bleu5.gif);
font-size:15px;
list-style: none ;
padding:3px;
margin-left:3px;
}

.menu li a
{
color: #fff ;
text-align: center ;
text-decoration: none ;
}

.menu li a:hover, #menu li a:focus, #menu li a:active
{
background-image:url(fond.gif);
text-decoration: none ;
display:block;
}

.menu li.logo_menu2
{
background-image:none;
border: none ;
margin-top:-2%;
}

donc display:block; tu le met dans .menu li a

.menu
{
margin-left:10%;
}

.menu li
{
float: left ;
border: 1px solid #000000 ;
background-image:url(degrade_bleu5.gif);
font-size:15px;
list-style: none ;
}

.menu li a
{
color: #fff ;
text-align: center ;
text-decoration: none ;
display:block;
padding:3px;
margin-left:3px;
}

.menu li a:hover, #menu li a:focus, #menu li a:active
{
background-image:url(fond.gif);
text-decoration: none ;
} 

menu li.logo_menu2
{
background-image:none;
border: none ;
margin-top:-2%;
padding:3px;
margin-left:3px;
}

Malheureusement pas de changement. En tout cas je te remercie de te pencher sur mon problème.

.menu
{
margin-left:10%;
}

.menu li
{
float: left ;
border: 1px solid #000000 ;
background-image:url(degrade_bleu5.gif);
font-size:15px;
list-style: none ;
}

.menu  a
{
color: #fff ;
text-align: center ;
text-decoration: none ;
display:block;
padding:3px;
margin-left:3px;
}

.menu a:hover, #menu  a:focus, #menu  a:active
{
background-image:url(fond.gif);
text-decoration: none ;
} 

.menu li.logo_menu2
{
background-image:none;
border: none ;
margin-top:-2%;
padding:3px;
margin-left:3px;
}

et comme çà ??

C'est bon !!! Alors toi t'es un boss. J'ai juste changé une petite bidouille mais grâce à toi je me sors de ce casse tête.

Merci encore.

donc la solution , c'est de bien séparer le css du li et du a

je vois pas les reponses??