[problème] Menu css et doublon d'image

Bonjour à tous,

Après avoir parcouru le forum, certain sujet ont sensiblement le même petit soucis, mais pas exactement le même, ainsi je me permet de poster une nouveau sujet.

Consultez le lien ici
Observez le menu de droite contenant "music" et "pictures"
le déroulement de ceci s'effectue pas comme il le faudrait, cela réplique l'image de fond sur laquelle ils sont.

Voici le code html:

<td height="26" colspan="5"><table width="780" height="26" border="0" cellpadding="0" cellspacing="0" background="images/menu.gif">
<td width="15" height="26">&nbsp;</td>	
<td width="50"><div align="center"><a href="#" class="menuh">Home</a></div></td>
<td width="10"><div align="center"><img src="images/puce.gif" /></div></td>
<td width="400" height="26">&nbsp;</td>
<td width="215" height="26"><div class="menuIE">
<a class="boutonIE" href="#nogo">Music
<table><tr><td>
<a class="SousMenu" href="#nogo">Rap/RnB</a>
<a class="SousMenu" href="#nogo">Techno</a>
<a class="SousMenu" href="#nogo">Rock</a>
<a class="SousMenu" href="#nogo">Variété</a>
<a class="SousMenu" href="#nogo">Fun</a>
<a class="SousMenu" href="#nogo">Divers</a>
</td></tr></table>
</a>
<a class="boutonIE" href="#nogo">Pictures
<table><tr><td>
<a class="SousMenu" href="#nogo">Visu</a>
<a class="SousMenu" href="#nogo">Sorties</a>
<a class="SousMenu" href="#nogo">Travel</a>
<a class="SousMenu" href="#nogo">Vacances</a>
<a class="SousMenu" href="#nogo">Fêtes</a>
<a class="SousMenu" href="#nogo">Divers</a>
</td></tr></table>
</a>
</div>


<div class="boutonFF">Music<br />
<a class="SousMenu" href="#nogo">Rap/RnB</a>
<a class="SousMenu" href="#nogo">Techno</a>
<a class="SousMenu" href="#nogo">Rock</a>
<a class="SousMenu" href="#nogo">Variété</a>
<a class="SousMenu" href="#nogo">Fun</a>
<a class="SousMenu" href="#nogo">Divers</a>
</div>
<div class="boutonFF">Pictures<br />
<a class="SousMenu" href="#nogo">Visu</a>
<a class="SousMenu" href="#nogo">Sorties</a>
<a class="SousMenu" href="#nogo">Travel</a>
<a class="SousMenu" href="#nogo">Vacances</a>
<a class="SousMenu" href="#nogo">Fêtes</a>
<a class="SousMenu" href="#nogo">Divers</a>
</div></td> 
</table></td>

et le code css:

.menuIE {
    display:none; 
    display:block;
}

a.boutonIE, a.boutonIE:link, a.boutonIE:visited, a.boutonIE:active {
    color:#000; 
    width:90px; 
    height:18px; 
    display:block; 
    background:#c33; 
    border:1px solid #000; 
    margin-right:1px; 
    text-align:center; 
    float:left; 
    text-decoration:none; 
    font-family: verdana; 
    font-size:10px; 
    line-height:18px; 
    overflow:hidden;
}

a.boutonIE:hover {
    color:#fff; 
    background:#000; 
    overflow:visible;}

a.boutonIE:hover table {
    display:block; 
    background:#eee; 
    border-collapse:collapse;
}

.boutonFF {
    color:#ffffff; /*couleur texte music/pictures au repos*/
    width:90px; 
    height:18px; 
    display:block !important; 
    display:none; 
    background:#176e00; /*couleur fond au repos music/pictures*/
    border:1px solid #000; 
    margin-right:1px; 
    text-align:center; 
    float:left; 
    text-decoration:none; 
    font-family: verdana; 
    font-size:10px; 
    line-height:18px; 
    overflow:hidden;
 }

.boutonFF:hover {
    height:auto; 
    cursor:pointer;
    color:#ffffff; /*couleur texte écriture music/pictures en action*/
    background:#ff0000; /*couleur fond music/pictures en actions*/
 }


a.SousMenu, a.SousMenu:link, a.SousMenu:visited, a.SousMenu:active {
    display:block; 
    width:90px; 
    width:88px; 
    height:18px; 
    border-bottom:1px solid #000; 
    text-decoration:none; 
    color:#FFFFFF; /*couleur d'écriture du texte dans les sous menus*/
    font-family: verdana; 
    font-size:10px; 
    text-align:center;
    background:#000000; /*couleur de fond des sous menus*/
}


a.SousMenu:hover {background:#00b9ff;} /*couleur selection sous menus*/

Je vous remercie d'avance.
Nony
Modifié par Nony (01 Dec 2006 - 20:34)

Bonjour ...

Sans avoir jeté un oeil au problème rencontré, je me posais la question suivante : pourquoi utilises-tu un tableau pour une mise en page de liens ?
Si je ne me trompe pas, tu n'as à peu de choses près qu'une suite de liens dans ton tableau. Ne te serait-il pas plus simple de les mettre en forme via une liste non numérotée (<ul></ul>) ?

Et ce serait tellement plus sémantique ...