Problème à la vadiation W3C XHTML 1.0...

Bonjour à tous,

j'ai un problème avec un menu à onglet... ce dernier doit-être dynamique (comprenez contenu changeant) et donc, l'image servant à l'effet roll-over doit pouvoir s'adaptée au contenu.

voici mon code...

code HTML:

<!-- // Menu Onglets //-->
<div id="menu_onglet">
    <ul>
        <li><a href="#"><div class="menu_gauche"></div><div class="menu_centre">Société</div><div class="menu_droite"></div></a></li>
        <li class="spacer">&#124;</li>
        <li><a href="#"><div class="menu_gauche"></div><div class="menu_centre">Chauffage</div><div class="menu_droite"></div></a></li>
        <li class="spacer">&#124;</li>
        <li><a href="#"><div class="menu_gauche"></div><div class="menu_centre">Plomberie</div><div class="menu_droite"></div></a></li>
        <li class="spacer">&#124;</li>
    </ul>
</div>

et mon CSS:

div#menu_onglet { float:left; }
div#menu_onglet ul {
    height:28px; 
    margin:0 20px 0 20px; 
    list-style-type:none; 
}
div#menu_onglet ul li { 
    float:left; 
    height:28px; 
    text-align:center; 
    margin:0 10px; 
    color:#3287C8; 
}
div#menu_onglet ul li a { 
    display:block; 
    height:28px; 
    font:normal 18px Arial, Helvetica, sans-serif; 
    color:#3287C8; 
    text-decoration:none; 
}
div#menu_onglet ul li a div.menu_gauche { 
    float:left; 
    width:10px; 
    height:28px; 
    padding-top:2px; 
}
div#menu_onglet ul li a div.menu_centre { 
    float:left; 
    width:auto; 
    height:28px; 
    padding-top:2px; 
}
div#menu_onglet ul li a div.menu_droite { 
    float:left; 
    width:10px; 
    height:28px; 
    padding-top:2px; 
}
div#menu_onglet ul li a:hover div.menu_gauche { 
    width:10px; 
    height:28px; 
    background:url(../images/menu_gauche.gif) no-repeat; 
    cursor:pointer; 
}
div#menu_onglet ul li a:hover div.menu_centre { 
    height:28px; 
    background:url(../images/menu_centre.gif) repeat-x; 
    color:white; 
    cursor:pointer; 
}
div#menu_onglet ul li a:hover div.menu_droite { 
    width:10px; 
    height:28px; 
    background:url(../images/menu_droite.gif) no-repeat; 
    cursor:pointer; 
}
div#menu_onglet ul li div.active_gauche { 
    float:left; 
    width:10px; 
    height:28px; 
    background:url(../images/menu_gauche.gif) no-repeat; 
    padding-top:2px; 
}
div#menu_onglet ul li div.active_centre { 
    float:left; 
    width:auto; 
    height:28px; 
    background:url(../images/menu_centre.gif) repeat-x; 
    font:normal 18px Arial, Helvetica, sans-serif; 
    color:white; 
    padding-top:2px; 
}
div#menu_onglet ul li div.active_droite { 
    float:left; 
    width:10px; 
    height:28px; 
    background:url(../images/menu_droite.gif) no-repeat; 
    padding-top:2px; 
}

Voilà voilà... le code n'est là que pour montrer ma "méthode" actuelle...

Le problème est que mettre des DIV dans une liste n'est pas correct (pas conforme avec W3C)... donc ma question :

comment puis-je faire pareil... mais autrement ? (@=D)

Merci beaucoup !