Geef uitleg aan je links

Om een link extra uitleg te geven bestaat er het title="uitleg" attribuut, maar het zou eigenlijk geen/nooit kwaad kunnen de beschrijving van de link extra in de verf te zetten. Tegelijkertijd is deze tutorial een variatie en een uitbreiding op het vorige artikel: Hoe een block hover maken in een lijst van links.

xHTML

<ul id="menu">
<li id="uitleg">uitleg</li>
<li>
<a href="#">Link 1 <span>Uitleg link#1</span></a>
</li>
<li>
<a href="#">Link 2 <span>Uitleg link#2</span></a>
</li>
<li>
<a href="#">Link 3 <span>Uitleg link#3</span></a>
</li>
<li>
<a href="#">Link 4 <span>Uitleg link#4</span></a>
</li>
<li>
<a href="#">Link 5 <span>Uitleg link#5</span></a>
</li>
</ul>

De bedoeling is nu dat de uitleg in de li#uitleg wordt getoond, dit kunnen we enkel maar verwezenlijken door position absolute te gebruiken, dus het lijkt wel duidelijk dat de ul#menu relative zal moeten zijn.

CSS

ul#menu {
margin: 50px 0 0 50px;
padding: 0;
list-style: none;
width: 200px;
position: relative;
}
ul#menu li a, ul#menu li#uitleg {
display: block;
background: #F2F2F2;
height: 25px;
line-height: 25px;
border: 1px solid #E5E5E5;
margin: -1px 0px 0px 0px;
color: #666;
text-decoration: none;
padding-left: 5px;
}
ul#menu li#uitleg {
color: #F2F2F2;
margin-top: 0;
}
ul#menu li a span {
display: none;
}
ul#menu li a:hover {
background: #E5E5E5;
text-decoration: none;
}
ul#menu li a:hover span {
display: block;
color: #666;
position: absolute;
text-decoration: none;
width: 195px;
padding: 3px 0 3px 5px;
top: -3px;
left: 0;
}

Demo

Je kan een voorbeeld van dit alles op deze pagina bekijken

Besluit

Het had natuurlijk allemaal een beetje meer fancy mogen zijn, maar hey, dit laat ik aan uzelf over, misschien toon jij mij wel een online voorbeeld van een designgewijs-meer-aantrekkelijke-versie ?