Menus / Boxes / Logos

Horizontal menu with item descriptions

Here's an example of how you can provide additional info about each menu item.

Note that in order for the menu to fully work in IE<7 you will need to use JavaScript (for example the whatever:hover hack).

You may use it freely for any purpose without seeking my permission.
A link back to would be greatly appreciated.

<ul id="menudemo10">
<li id="first"><a href="#">menu link 1</a><span>Lorem ipsum sed impetus dolores accumsan ad, cu suavitate consequuntur vim, elit invenire vim ne.</span></li>
<li><a href="#">menu link 2</a><span>Eum no sonet aliquam, id odio voluptatum nec, vis an quod cetero impetus.</span></li>
<li><a href="#">menu link 3</a><span>Est an stet dicunt persequeris, no verterem adipiscing nam.</span></li>
<li><a href="#">menu link 4</a><span>Nec enim graecis argumentum ei, no cum latine sanctus inciderint.</span></li>
<li id="last"><a href="#">menu link 5</a><span>In sea alii erant saepe, an ius soluta fabellas, cu homero mandamus gubergren qui.</span></li>
</ul>

* {
margin: 0;
padding: 0;
}
#menudemo10 {
list-style: none;
width: 410px;
height: 26px;
background: #fff;
margin: 10px 0 0 0;
padding: 1px;
}
#menudemo10 li {
float: left;
width: 80px;
font-size: 11px;
font-family: tahoma, sans-serif;
line-height: 24px;
background: #00b200;
position: relative;
z-index: 2;
border: 1px solid #fff;
}
#menudemo10 li span {
display: none;
}
#menudemo10 li:hover {
width: 140px;
background: #bf008c url('img/menustripes.gif');
padding: 11px 1px 81px 1px;
margin: -12px -32px -82px -32px;
position: relative;
z-index: 1;
border: 2px solid #fff;
}
#menudemo10 li:hover span {
display: block;
position: absolute;
top: 44px;
left: 0;
color: #fff;
line-height: 15px;
padding: 0 4px;
}
#menudemo10 li#first:hover {
margin: -12px -64px -82px 0;
position: relative;
left: -1px;
}
#menudemo10 li#last:hover {
margin: -12px -1px -82px -63px;
}
#menudemo10 a {
display: block;
font-weight: bold;
text-decoration: none;
color: #fff;
text-align: center;
}
#menudemo10 li#first:hover a {
width: 78px;
}
#menudemo10 li#last:hover a {
width: 78px;
float: right;
}