Problème de menu avec images (ul - li)

[Zildal]

Bonjour à tous,

J'ai mis en place le menu avec ul - li et sous-menu.

Pour le moment il n'y a pas de souci pour IE8 et Firefox comme le montre l'image dessous :

Par contre, sous Internet Explorer 7, il y a un souci de l'image où le flèche vert "l'Equation" n'est pas au même alignement :

J'ai cherché sans succés.

Avez-vous l'idée pourquoi ça bugge?

Script HTML :

<ul>

<li><a class="current" title="Menu secondaire : L'entreprise Delta Process" href="#">L'entreprise Delta Process</a></li>

<li><a title="Menu secondaire : Présentation de Tadeo" href="#">Présentation de Tadeo</a></li>

<li><a title="Menu secondaire : Historique" href="#">Historique</a></li>

<li><a title="Menu secondaire : L'Equation" href="#">L'Equation</a></li>

<ul class="trois">

<li><a title="Menu secondaire : Introduction" href="#">Introduction</a></li>

<li><a title="Menu secondaire : Les besoins" href="#">Les besoins</a></li>

<li><a title="Menu secondaire : La méthode de résolution" href="#">La méthode de résolution</a></li>

<li><a title="Menu secondaire : Le résultat" href="#">Le résultat</a></li>

<li><a title="Menu secondaire : Les acteurs de la solution" href="#">Les acteurs de la solution</a></li>

<li><a title="Menu secondaire : Tadeo et la TadeoGuilde" href="#">Tadeo et la TadeoGuilde</a></li>

</ul>

<li><a title="Menu secondaire : L'Equipe" href="#">L'Equipe</a></li>

</ul>

Script CSS :

.Syb li {

background:url("../img/Sub_li.png") no-repeat scroll left center transparent;

border-bottom:1px solid #E3E3E3;

list-style:none outside none;

margin:0;

padding:3px 0 2px 30px;

}

.Syb ul.trois {

margin:0 20px;

padding:0;

}

.trois li {

background:url("../img/Sub_li_sec.png") no-repeat scroll left center transparent;

border-bottom:1px solid #E3E3E3;

list-style:none outside none;

margin:0;

padding:0 20px;

}

[beladom]

Salut,

Premièrement tu as un petit problème de syntaxe, en effet la liste secondaire (à laquelle tu as attribué la classe "trois") n'est pas déclarée dans l'élément de sa liste parent (en l'occurrence "L'équation"). Il faut donc que tu aies un code de ce type :

<li><a title="Menu secondaire : L'Equation" href="#">L'Equation</a>
	<ul class="trois">
	       <li><a title="Menu secondaire : Introduction" href="#">Introduction</a></li>
               <li><a title="Menu secondaire : Les besoins" href="#">Les besoins</a></li>
               <li><a title="Menu secondaire : La méthode de résolution" href="#">La méthode de résolution</a></li>
               <li><a title="Menu secondaire : Le résultat" href="#">Le résultat</a></li>
               <li><a title="Menu secondaire : Les acteurs de la solution" href="#">Les acteurs de la solution</a></li>
               <li><a title="Menu secondaire : Tadeo et la TadeoGuilde" href="#">Tadeo et la TadeoGuilde</a></li>
    </ul>
</li>

En ce qui concerne l'alignement de ta puce, si tu regardes bien, sur IE7 celle ci est bien présente mais elle est centrée à la verticale entre l'élément "L'équation" et son dernier élément enfant "Tadeo et la TadeoGuilde". Pour résoudre ton problème, il te suffit de modifier la propriété de positionnement vertical du style background de la classe Syb comme ce qui suit :

.Syb li {
background:url("Sub_li.jpg") no-repeat scroll left top transparent;
border-bottom:1px solid #E3E3E3;
list-style:none outside none;
margin:0;
padding:3px 0 2px 30px;
}

Tu peux aussi saisir une valeur en pixels pour avoir quelque chose de plus précis :

background:url("Sub_li.jpg") no-repeat scroll left 8px transparent;

[Zildal]

Ça fonctionne! C'est aussi simple que ça!

Merci beaucoup!