Open / Close

<div id="menue3">
<a href="#"><span class="first">Entrada 1</span>
   <span class="invis">: </span>
   <span class="second">Todas las posibles cosas</span></a><br class="invis">
<a href="#"><span class="first">Entrada 2</span>
   <span class="invis">: </span>
   <span class="second">Más temas fundamentales</span></a><br class="invis">
<a href="#"><span class="first">Entrada 3</span>
   <span class="invis">: </span>
   <span class="second">Nunca se sabe todo</span></a><br class="invis">
<a href="#"><span class="first">Entrada 4</span>
   <span class="invis">: </span>
   <span class="second">Y el resto...</span></a>
</div>

#menue3 {
z-index: 102;
width: 360px;
background-color: transparent;
color: #000;
margin: 0 auto;
}
#menue3 a {
display: block;
width: 290px;
height: 22px;
background-image: url(../images/schieber.gif);
background-repeat:no-repeat;
background-position: top left;
background-color: #e0d0b0;
color: #000;
font-weight: bold;
padding: 6px 0 0 70px;
margin: 1px 0 2px 0;
border: 1px solid #000;
text-decoration: none;
}
#menue3 a:hover {
display: block;
width: 340px;
height: 22px;
background-image: url(../images/schieber.gif);
background-repeat: no-repeat;
background-position: top right;
background-color: #f0e0c0;
color: #600;
padding: 6px 0 0 20px;
}
#menue3 a:hover span.first {
display: none;
}
#menue3 a span.second {
display: none;
}
#menue3 a:hover span.second {
display: inline;
}
#menue3 .invis {
display: none;
}

Índice Capítulo 7
Contenido material adicional