Changement couleur arriere menu deroulant

Bonjour

J air ecuperer le script menu deroulant horizontal.

Mon probleme est que je voudrais changer la couleur de l'arriere plan qund on passe la souris dessus.

Actuellment cela change juste l'arriere plan au niveau du lien mais pas de tout le div:

Vous pouvez voir un exemple la:

http://www.faire-part-tendance.com/probcss/

Je joint egalement le code:

<table width="100%" height="505" border="0" cellspacing="0"  bgcolor="#FFFFFF" class="arr">
      <tr>
        <td height="32" colspan="2" valign="middle">&nbsp;</td>
      </tr>
      <tr>
        <td width="127" height="242" valign="top">&nbsp;</td>
        <td width="925" align="left" valign="top">

          <table width="100%" height="72" border="1" cellpadding="0" cellspacing="0" bordercolor="#000000">
            <tr>
              <td width="132" align="center" valign="middle" class="textenoire"><div id="menu">
                <dl>			
                  <dt onmouseover="javascript:montre('smenu1');">
                    <a href="#"><br />
                      <br />
                      <span class="textenoire">Test menu 1</span><br />
                      <br />
                      <br />
                      </a>		</dt>
  
		<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
		  <ul>		  
  <li> <a href="#">Test 1</a></li>
  <li> <a href="#">Test 2</a></li>
  <li> <a href="#">Test 3</a></li>
  <li> <a href="#">Test 4</a></li>
			  </ul>
		  </dd>
	  </dl>
  </div></td>
              <td width="136" align="center" valign="middle" class="textenoire"><div id="menu">
                <dl>			
                  <dt onmouseover="javascript:montre('smenu2');">
                    <a href="#"><br />
                      <br />
                      <span class="textenoire">Test menu 2</span><br />
                      <br />
                      <br />
                      </a>		</dt>
  
		<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">
		  <ul>		  
  <li> <a href="#">Test 1</a></li>
  <li> <a href="#">Test 2</a></li>
  <li> <a href="#">Test 3</a></li>
  </ul>
		  </dd>
	  </dl>
  </div></td>
              <td width="130" align="center" valign="middle" class="textenoire"><div id="menu">
                <dl>			
                  <dt onmouseover="javascript:montre('smenu3');">
                    <a href="#"><br />
                      <br />
                      <span class="textenoire">Test menu 3</span><br />
                      <br />
                      <br />
                      </a>		</dt>
  
		<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">
		  <ul>		  
  <li> <a href="#">Test 1</a></li>
  <li> <a href="#">Test 2</a></li>
  </ul>
		  </dd>
	  </dl>
  </div></td>
              </tr>
            </table>

et le css

dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
	position: static; /* placement du menu, à modifier selon vos besoins */
	
	z-index:100;
	width: 132px; /* correction pour Opera */
	height: 230px;
	
}
#menu dl {
float: left;
width: 9.8em;


}
#menu dt {
cursor: pointer;
text-align: center;
background: #ffffff;
border: 1px solid white;
margin: 1px;

}




#menu li {
text-align: center;
background: #F2BD49;
border-bottom:1px solid #ffffff; 
text-decoration:none; 
color:#009287;
font-family: verdana; 
}
#menu li a, #menu dt a {
text-align: center;
border-bottom:1px solid #ffffff; 
text-decoration:none; 
color:#009287;
font-family: verdana; 
	
}


#menu dl a:hover, #menu dl a:focus  ,#menu li a:hover, #menu li a:focus{
background: #D4E6EA;
text-align: center;
border-bottom:1px solid #ffffff; 
text-decoration:none; 
color:#009287;
font-family: verdana; 	
}


#menu dt a:hover{

cursor: pointer;
text-align: center;
background: #F2BD49;
border: 1px solid #F2BD49;
margin: 1px;


}

#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray; 
}

Je vous remerci de votre aide

Cordialement

Hello,

Neoh56 a écrit :
Actuellment cela change juste l'arriere plan au niveau du lien mais pas de tout le div

Pour faire ça il faut mettre tes balises <a> en display:block; pour qu'elles prennent toute la largeur disponible !

Salut,

Oui par exemple mais on peut aussi agir, via JS, sur le conteneur si besoin est. Cela dit, avant même de toucher à quoi que ce soit, que fait ton menu dans un tableau imbriqué ?

Connais-tu cet article ?