Infobox

<div id="menu">
<ul>
<li><a href="#">Sommeraster <span>Text 1</span></a></li>	
<li><a href="#">Friedensrose <span>Text 2</span></a></li>
<li><a href="#">Ringelblume <span>Text 3</span></a></li>
</ul>
</div>

#menu ul {
list-style: none;
}
#menu ul li {
float: left;
width: auto;
}
#menu ul a {
display: block;
text-decoration: none;
background-color: #e2bf87;
color: #000;
border: 1px solid #000;
}
#menu ul a:hover {
background-color: #e0d0b0;
color: #000;
}
#menu ul a span {
display: none;
}
#menu ul a:hover span {
display: inline;
position: absolute;
top: 8em;
left: 30px;
width: 20em;
padding: 10px;
background-color: #ffc;
color: #000;
}

Índice Capítulo 8
Contenido material adicional