Je n'en connais pas mais je peux m'expliquer.
Selon moi il est important de rester simple et cartésien. Un menu n'est la plupart du temps qu'une liste de lien. Donc soyons fous et audacieux utilisons les listes <ul><li></li></ul>. Si ce menu est horizontal, soit une liste de liens en ligne, n'ayons pas peur d'aller encore plus loin dans notre délire très mince et stylisons la liste afin qu'elle soit en ligne.
Ainsi donc paraîtrait-il logique aux yeux d'hurluberlus tel que moi de faire ainsi :
- Code HTML - Code: Tout sélectionner
<ul class="menu-en-ligne">
<li><a href="{U_A}">{L_A}</a></li>
<li><a href="{U_B}">{L_B}</a></li>
<li><a href="{U_C}">{L_C}</a></li>
<li><a href="{U_D}">{L_D}</a></li>
</ul>
- Code CSSIci n'oublions pas la signification de ces initiales. On parle de style en cascade et s'il ne faut pas trop abuser des cascades au risque de se compliquer la vie c'est parfois bien adapté et donc pratique. En l'occurrence, plutôt que de définir des nouvelles classes on peut attribuer en cascade tous les styles communs
- Code: Tout sélectionner
ul.menu-en-ligne {
/* espaces au dessus et au dessous du bloc nuls */
/* centrage horizontal via le "auto" du bloc dans son conteneur. */
/* Pas forcément nécessaire mais bon */
margin: 0 auto;
border: 1px solid blue;
/* Centrage des <li> à l'intérieur du bloc <ul> */
text-align: center;
}
ul.menu-en-ligne li {
/* Nous pas vouloir vilaines pupuces qui grattent */
list-style: none;
/* Hop, on met nos éléments de liste en ligne */
display: inline;
/* Espaçons un peu les éléments de la liste, nul dessus et dessous, 2px à gauche et à droite */
margin: 0 2px 0;
}
ul.menu-en-ligne li a {
/* parce qu'on veut que nos liens soient des blocs en ligne. Avec bloc tout court, pas bon, ça se met en colonne */
display: inline-block;
text-decoration: none;
font: bold 11px Tahoma;
color: #FFF;
width: 130px;
height: 30px;
background: transparent url("{T_THEME_PATH}/images/button.png") no-repeat;
text-align: center;
/* Réglage de la hauteur de ligne à la même valeur que la hauteur du bloc pour centrer le texte verticalement */
line-height: 30px;
}
Il faut ensuite définir le comportement des liens aux survol, ce que je n'ai pas fait.
J'ai fait une
page d'exemple sans image avec des couleurs de fond et de bord, le bleu étant le bloc <ul> et les fonds verts bordés de rouge les <a> dans les <li>. Suffit d'afficher la source.
Voilà, j'espère que ça peut aider du monde, si tu as des questions Samurai ou d'autres gens passant par là, n'hésitez pas, si je peux, je répondrais en essayant d'être clair.
PS : Une adresse intéressante et
http://www.alsacreations.com/, ses tutoriels et son forum.
( ça peut aider aussi) j'ai voulu tester le menu donner par 
Flux RSS