Infobox

<div id="menu">
<ul>
<li><a href="#">Sommeraster<span class="aa"></span></a></li>	
<li><a href="#">Friedensrose<span class="bb"></span></a></li>
<li><a href="#">Ringelblume<span class="cc"></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: 285px;
height: 287px;
}
#menu ul a:hover span.aa {
background-image: url(sommeraster.jpg);
background-repeat: no-repeat;
}
#menu ul a:hover span.bb {
background-image: url(friedensrose.jpg);
background-repeat: no-repeat;
}
#menu ul a:hover span.cc {
background-image: url(ringelblume.jpg);
background-repeat: no-repeat;
}

Índice Capítulo 8
Contenido material adicional