Question

What’s the best way to mark up a navigation menu with captions for each element? (I think the term ‘speaking’ is attributable to Smashing Magazine, see http://www.smashingmagazine.com/2008/02/26/navigation-menus-trends-and-examples/)

A definition list seems most appropriate, something like:

<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>

But I can’t think how to style it to look like this: https://i.stack.imgur.com/Etd4K.png
without extra DIVs around each menu item which I don’t think is valid HTML.

Thanks in advance.

Answer 1

demo: http://jsfiddle.net/Afh9N/

The CSS isn’t pretty…

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;    
}