[résolu]Menu déroulant - comment valider W3C?

Bonjour,

J'ai mis en place un menu déroulant sur mon site www.hyboria.info qui fonctionne bien sur toutes les versions de navigateur que j'ai testé (FF, IE7, IE6, Safari PC, Opera PC). Ce menu provient du site suivant:

http://www.cssplay.co.uk/menus/final_drop.html

J'avais d'abord tenté d'utiliser le menu que vous proposez sur vos pages mais sans succès. Je n'ai jamais réussi à le faire fonctionner correctement sur IE6 alors que celui-ci fonctionne parfaitement.

Par contre, il ne semble pas valider W3C. Je suppose que c'est en raison des <ul> imbriqués dans des <li> du type:

<ul>
    <li>
        <ul>
            <li></li>
        </ul>
    </li>
</ul>

Le code exact sur mon site est:

<div class="ddmenu">

<ul>
<li><a href="/node/344">Actualit&eacute;s
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="/actualites/home">Nos actualit&eacute;s</a></li>
<li><a href="/aggregator">Actualit&eacute;s RSS</a></li>
<li><a href="/interviews/home">Interviews</a></li>
<li><a href="/poll/home">Sondages</a></li>
</ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="ddsep">|</li>
<li><a href="/node/328">G&eacute;n&eacute;ralit&eacute;s
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="/node/230">Age of Conan</a></li>
<li><a href="/node/247">Conan JDR</a></li>
<li><a href="/node/345">Cin&eacute;ma &amp; TV</a></li>

<li><a href="/node/345">Romans</a></li>
<li><a href="/node/345">Comics &amp; BDs</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="ddsep">|</li>
<li><a href="/connaissances/home">Connaissances
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="/connaissances/geo">G&eacute;ographie</a></li>

<li><a href="/connaissances/histoire">Histoire</a></li>
<li><a href="/connaissances/culture">Culture</a></li>
<li><a href="/connaissances/mytho">Mythologie</a></li>
<li><a href="/connaissances/perso">Personnages</a></li>
<li><a href="/connaissances/best">Bestiaire</a></li>
<li><a href="/connaissances/autres">Autres</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li><li class="ddsep">|</li>
<li><a href="/guides/home">Aides de jeu

<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="/guides/general">Général</a></li>
<li><a href="/guides/classes">Classes</a></li>
<li><a href="/guides/artisanat">Artisanat</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="ddsep">|</li>
<li><a href="/node/356">Ressources
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->

<ul>
<li><a href="/image">Images</a></li>
<li><a href="/videos/home">Vidéos</a></li>
<li><a href="/audio">Sons</a></li>
<li><a href="/telechargements/home" class="menuh_small">Téléchargements</a></li>
<li><a href="/links/home">Liens</a></li>
<li><a href="/dev">Citations de développeurs</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="ddsep">|</li>

<li><a href="/node/487">Communaut&eacute;
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="/recits/home">Récits</a></li>
<li><a href="/quotes/home">Citations</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="ddsep">|</li>
<li><a href="/forum" id="aforum">Forum
<!--[if IE 7]><!--></a><!--<![endif]-->
</li>

</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>

Est-ce qu'il y a un moyen de tourner ça pour réussir à valider?

Merci d'avance pour votre aide!
Modifié par Luneh (10 Aug 2007 - 10:59)

Tu as plusieurs erreurs sur ton site qui ne sont pas lié à ton menu.

Tu as un </h3> ligne 164 alors que <h3> n'a pas été ouvert,

<p class="bold">But now there are more in the series - <a href="http://www.cssplay.co.uk/menus/simple_vertical.html">DROP-DOWN</a> and <a href="http://www.cssplay.co.uk/menus/flyout_4level.html">FLY-OUT</a>.</h3>

Le p n'est pas fermé. Le gros des problème de validation viennent d'ici.

Merci, néanmoins ça, ça n'est pas mon site.

Le mien c'est http://www.hyboria.info comme indiqué plus haut. Tu as pris le lien duquel provient mon menu déroulant (qui passe sans autres la validation là-bas soit dit en passant, étrange).
Modifié par Luneh (08 Aug 2007 - 11:50)

Rha c'est bon. J'avais manqué un </li> et un </ul> en trop.

La validation n'est pas encore là mais au moins ça progresse.

Bonjour,

Ben il semblerait que tu aies un </li> et un </ul> en trop dans ton code.
Après vérification manuelle, c'est effectivement le cas: tu fermes un li puis un ul non ouverts.

En ce qui concerne le menu déroulant lui-même... hmm, bon, ça vient de CSSPlay, donc ce genre de construction tarabiscotée et utilisation abusive des liens, de la pseudo-classe :hover et des commentaires conditionnels ne me surprend guère. À mon humble avis, toute personne un peu censée et correctement informée -- et qui souhaite/doit malgré tout faire un menu déroulant -- se dirigera plutôt vers un menu déroulant utilisant Javascript.
Par contre, je ne saurais pas trop lequel conseiller (pas celui du vieux tutoriel d'Alsa).

Merci pour le conseil. Je pensais justement que pouvoir se passer du javascript n'était pas une mauvaise chose.

Dans tous les cas celui du tuto d'Alsacréations, que j'ai essayé avant de passer à celui que j'utilise actuellement, m'a toujours fait des soucis avec l'un des IE, soit IE6 soit IE7 selon ce que je tentais de faire.

Pas terrible...

Donc si quelqu'un a une suggestion de menu qui fonctionne bien et qui a été testé sur IE6 et IE7, je suis preneuse!

Luneh a écrit :
Je pensais justement que pouvoir se passer du javascript n'était pas une mauvaise chose.

Pas quand il s'agit de réaliser des effets qui relèvent du domaine de compétence de Javascript.

Concrètement, il ne s'agit pas d'éviter Javascript, mais de s'assurer que le site est accessible (et donc, utilisable) sans Javascript. Ici, tant que le titre de la rubrique permet d'accéder à une page avec un sous-menu en dur dans la page, on a assuré le minimum.

Luneh a écrit :
Donc si quelqu'un a une suggestion de menu qui fonctionne bien et qui a été testé sur IE6 et IE7, je suis preneuse!

Pour ça je passe la main (cf. ma signature).
Je sais que le menu déroulant proposé sur FairyTells est plutôt bien, mais très dur à mettre en place dit-on. Après, nous en avons bien un de très sympa dans les cartons d'Alsa, mais ça ne sera pas publié avant plusieurs semaines/mois.

Bon, je chercherai ou attendrai patiemment celui d'Alsacréations. Pour l'heure ça fonctionne au moins on dira...

Je passe le fil en résolu.