Navigation sémantique "parlante" en CSS avec légendes

Question

Quelle est la meilleure façon de baliser un menu de navigation avec des légendes pour chaque élément ? (Je pense que le terme "parlant" est attribuable à Smashing Magazine, voir http://www.smashingmagazine.com/2008/02/26/navigation-menus-trends-and-examples/ )

Une liste de définitions semble la plus appropriée, quelque chose comme :

<dl id="menu">
    <dt>About</dt>
    <dd>Our work, mission, history and people</dd>
    <dt>Events</dt>
    <dd>We put on workshops, talks and debates</dd>
    <dt>Media</dt>
    <dd>See videos from our archive of past events</dd>
    <dt>Contact</dt>
    <dd>Get in touch with us for further information</dd>
</dl>

Mais je n'arrive pas à trouver comment la coiffer pour qu'elle ressemble à ça : http://i.stack.imgur.com/Etd4K.png sans DIVs supplémentaires autour de chaque élément du menu, ce qui ne me semble pas être du HTML valide.

Merci d'avance.

Answer 1

démo : http://jsfiddle.net/Afh9N/

Le CSS n'est pas joli...

dt, dd {
    width:120px;
    padding:0 10px;
    border-left:2px solid #333;
    float:left;
}

dt {
    margin-left:-120px;
    font-weight:bold;
}

dt:first-child {
    margin:0;
}

dd {
    position:relative;
    top:20px;
    font-family:verdana;
    font-size:9px;
    left:-142px;    
}

Answer 2

Je ne pense pas qu'un definition list est le meilleur moyen d'y parvenir.

Je styliserais un ul et utiliser spans pour la "partie parlante". Quelque chose comme ça :

<ul id="menu">
    <li>About <span>Our work, mission, history and people</span></li>
    <li>Events <span>We put on workshops, talks and debates</span></li>
</ul>

CSS

li{display:block; float:left; background:blue; border:1px; color:white; 
   font-family:arial; font-size:1.25em; width:150px; padding:1em;}
span{display:block; font-size:.7em;}

http://jsfiddle.net/Yzx8K/1/

Answer 3

Essayez quelque chose comme ça :

<ul>
<li><h2>Menu Item 1</h2> Menu Item 1 "Speaking Text"</li>
<li><h2>Menu Item 2</h2> Menu Item 2 "Speaking Text"</li>
<li><h2>Menu Item 3</h2> Menu Item 3 "Speaking Text"</li>
<li><h2>Menu Item 4</h2> Menu Item 4 "Speaking Text"</li>
</ul>

Vous pouvez ensuite intégrer les éléments de liste dans le menu comme vous le souhaitez. L'en-tête de chaque élément de liste constitue à la fois une cible de style et un moyen sémantique de montrer l'importance du texte principal "Élément de menu".